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" >滚动到这⾥</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() {
}
</script>
<input type="button" value="点击button跳转" onclick="click_scroll();" />
<a id="anchor_scroll" href="#pos" >点击这⾥本页跳转</a>
...
js控制滚动条
这⾥是很多⽂字，把页⾯撑开，撑出滚动条
...
<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:p //让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本来就是做动画⽤的，更多功能可以详细研究了。

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。