js，jquery滚动/跳转页面到指定位置的实现思路
要解决两个需求：
一个是从A页面跳到B页面，滚动到页面的任何地方；
第二个是在B页面内部点击某个元素，滚动到页面的任何地方；
怎么解决啊？很简单，当然是用锚点。
首先在A页面创建一个锚点
<body>
<a href="b.html#pos" target="_blank">点击跳转</a>
<body>
然后在B页面定义这个锚点
<body>
...
这里是很多文字，把页面撑开，撑出滚动条
...
<a name="pos">滚动到这里</a>
...
再加点文字
...
</body>
好，测试，OK！点过去之后是不是“滚动到这里”出现在了浏览器的最上方。
实际的情况经常是制作人员切好的页面，产品突然说要加个功能，需要滚动到某个地方，但是那个地方是个div，并没有a锚点，
创建一个锚点的话又会占据网页的空间，影响到网页的版式，这怎么办呢？我们创建一个隐藏的锚点试试，隐藏的锚点不占用空间。
继续：如果我让B页面里的 <a name="pos">滚动到这里</a> 不显示，就是设定display:none; 那么还能滚动到这里吗？ 试试
<body>
...
这里是很多文字，把页面撑开，撑出滚动条
...
<a name="pos" style="display:none;">滚动到这里</a>
隐藏之后滚动到这里
...
再加点文字
...
</body>
不妙，IE可以工作，火狐有点不给面子。
只能换一种思路，给锚点指定一个id能滚动到这里吗？ 试试
<body>
...
这里是很多文字，把页面撑开，撑出滚动条
...
<a id="pos">滚动到这里</a>
隐藏之后滚动到这里
...
再加点文字
...
</body>
OK,成功！看来换成id是个好办法，现在把锚点换成div试试
<body>
...
这里是很多文字，把页面撑开，撑出滚动条
...
<div id="pos">滚动到这里</div>
隐藏之后滚动到这里
...
再加点文字
...
</body>
OK,成功！ 这样就解决了问题，不需要插入一个<a></a>锚点，只需要给div加一个id就行了。
接下来解决第二个需求，在B页面内部点击某个元素，滚动到指定位置。
首先，在B.html顶部创建一个锚点，指向要滚动的那个div
<body>
<a href="#pos">点击这里本页跳转</a>
...
这里是很多文字，把页面撑开，撑出滚动条
...
<div id="pos">滚动到这里</div>
隐藏之后滚动到这里
...
再加点文字
...
</body>
OK,成功！那如果要点击一个button按钮滚动到指定位置呢？ button按钮不能添加href， 只能曲折解决。
先建立一个隐藏的锚点，然后点击button按钮的时候加一个onclick事件，然后通过js来调用锚点的click事件，曲线救国。
<body>
<script type="text/javascript">
function click_scroll() {
document.getElementById("anchor_scroll").click();
}
</script>
<input type="button" value="点击button跳转" onclick="click_scroll();" />
<a id="anchor_scroll" href="#pos" style="display:none">点击这里本页跳转</a>
...
这里是很多文字，把页面撑开，撑出滚动条
...
<div id="pos">滚动到这里</div>
隐藏之后滚动到这里
...
再加点文字
...
</body>
OK,成功！既然button能够成功，那其他的也就好办了，img，div都可以这么做。
还有一个方法通过jQuery的aminate动画方法也可以做，我贴出代码
<body>
<script type="text/javascript">
function click_scroll() {
var scroll_offset = $("#pos").offset(); //得到pos这个div层的offset，包含两个值，top和left
$("body,html").animate({
scrollTop:scroll_offset.top //让body的scrollTop等于pos的top，就实现了滚动
},0);
}
</script>
<input type="button" value="点击button跳转" onclick="click_scroll();" />...
这里是很多文字，把页面撑开，撑出滚动条
...
<div id="pos">滚动到这里</div>
隐藏之后滚动到这里
...
再加点文字
...
</body>
OK,成功！这个方法有个好处，就是控制滚动的速度，上面的蓝色的0就是控制速度的，0是立即的意思，那设为1000试试，
可以看到是慢慢的滚动到了pos，如果设为5000呢，就会更慢了。
为什么会这样呢？因为jQuery的animate本来就是做动画用的，更多功能可以详细研究了。
- jquery 点击元素后,滚动条滚动至该元素位置的方法
- jquery实现的图片点击滚动效果
- 基于jquery实现点击左右按钮图片横向滚动
- 一个JQuery写的点击上下滚动的小例子
- JQuery获取元素尺寸、位置及页面滚动事件应用示例
- JQuery获取元素文档大小、偏移和位置和滚动条位置的方法集合
- jQuery实现将div中滚动条滚动到指定位置的方法
- jQuery实现平滑滚动到指定锚点的方法
- 使用jquery animate创建平滑滚动效果（可以是到顶部、到底部或指定地方）
- 通过JQuery将DIV的滚动条滚动到指定的位置方便自动定位
- 利用jquery制作滚动到指定位置触发动画
- jQuery实现点击滚动到指定元素上的方法分析
相关文章
浅析javascript异步执行函数导致的变量变化问题解决思路
下面小编就为大家带来一篇浅析javascript异步执行函数导致的变量变化问题解决思路。小编觉得挺不错的，现在分享给大家，也给大家做个参考2016-05-05
javascript 模拟坦克大战游戏(html5版)附源码下载
这篇文章主要介绍了javascript 模拟坦克大战游戏关键点和遇到的问题及实现代码,需要的朋友可以参考下2014-04-04
这篇文章主要介绍了JS基于面向对象实现的拖拽功能,涉及javascript面向对象与页面元素动态操作的相关技巧,需要的朋友可以参考下2016-12-12
本文主要分享了原生JS实现跑马灯效果的示例代码。具有很好的参考价值，下面跟着小编一起来看下吧2017-02-02
最近公司有一个项目的需要做出旋钮的效果，旋钮有十个档，根据手指旋转切换，旋转时接近最近的档会有吸附效果。这篇文章主要介绍了vue实现移动端圆形旋钮插件效果 ,需要的朋友可以参考下2018-11-11
本文主要介绍了基于javascript实现报表页面集成天气的方法步骤，简单三步，一看就懂。具有很好的参考价值，需要的朋友一起来看下吧2016-12-12
今天小编就为大家分享一篇layer扩展打开/关闭动画的方法，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧2019-09-09
这篇文章主要介绍了fckeditor粘贴Word时弹出窗口取消的方法,是应用fckeditor时非常实用的技巧,需要的朋友可以参考下2014-10-10
页面中body onload 和 window.onload 冲突的问题的解决
关于页面中body onload 和 window.onload 冲突的问题的解决2009-07-07
今天小编就为大家分享一篇layui问题之渲染数据表格时,仅出现10条数据的解决方法，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧2019-09-09
最新评论