要解决两个需求: 
一个是从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本来就是做动画用的,更多功能可以详细研究了。 
                                    标签:
                                        
                            
                                免责声明:本站文章均来自网站采集或用户投稿,网站不提供任何软件下载或自行开发的软件!
                                如有用户或公司发现本站内容信息存在侵权行为,请邮件告知! 858582#qq.com
                            
                        桃源资源网 Design By www.nqtax.com
                        暂无“js,jquery滚动/跳转页面到指定位置的实现思路”评论...
                                     
                        