jquery滚动/跳转页面到指定位置的实现思路

简介:

还有一个方法通过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本来就是做动画用的,更多功能可以详细研究了。


本文转自 gutaotao1989 51CTO博客,原文链接:http://blog.51cto.com/taoyouth/2052619


相关文章
|
JavaScript 前端开发
jQuery实现从一个页面跳转到另一个页面的指定tab选项卡
jQuery实现从一个页面跳转到另一个页面的指定tab选项卡
82 0
|
JavaScript
jQuery实现动态添加和删除(点击按钮添加在页面添加和删除元素)
jQuery实现动态添加和删除(点击按钮添加在页面添加和删除元素)
84 0
|
JavaScript
基于jQuery的公告无限循环滚动实现代码
基于jQuery的公告无限循环滚动实现代码
59 0
|
JavaScript
Jquery插件知识之Jquery.cookie实现页面传值
Jquery插件知识之Jquery.cookie实现页面传值
58 0
|
2月前
|
JavaScript
jQuery实现无缝图片滚动效果
jQuery实现无缝图片滚动效果
150 67
|
3月前
|
JavaScript
分别用jquery和js修改页面元素
分别用jquery和js修改页面元素
38 2
|
4月前
|
移动开发 开发框架 JavaScript
基于Jquery WeUI的微信开发H5页面控件的经验总结(1)
基于Jquery WeUI的微信开发H5页面控件的经验总结(1)
|
3月前
|
JavaScript Java
分别使用java script和jQuery添加页面元素
分别使用java script和jQuery添加页面元素
32 0
|
4月前
|
移动开发 JSON JavaScript
基于Jquery WeUI的微信开发H5页面控件的经验总结(2)
基于Jquery WeUI的微信开发H5页面控件的经验总结(2)
|
缓存 前端开发 JavaScript
【前端用法】jquery获取当前页面的URL信息
【前端用法】jquery获取当前页面的URL信息
88 0