html 点击滚动条滚动位置,jQuery scrollTop() 方法关于点击滚动指定位置的应用

最近工作遇到了相关问题，决定总结一番；

​当页面的整体长度过程或者说内容过多的时候，导航的出现是必不可少的，通过滚动条滚动导航是一种改善用户体验的好方法，它的作用不但可以改善用户查阅效率，最重要是炫好吧!既然这么酷，实现方法是什么？不急我们慢慢分析。。

首先页面有很多内容，分很多模块，像新闻一样，一个个的向下排列。然后编写相应的菜单链接想要对应相应位置，html和css的部分就不多介绍了，要注意的是每个模块div的命名和a标签菜单对应性，以免编写jQuery的时候麻烦。

$('#to_new1').click(function(){

$('html,body').animate({scrollTop:$('#new1').offset().top},1000);​

})

上面的代码可以成功实现点击滚动功能了，可是由​$('html,body')可以看出是操作整个document的滚动条的如果不是body滚动条而是想要div的滚动条呢？解决方法如下：

$('#to_new1').click(function(){

$('#newbox').animate({

scrollTop: $('#new1').offset().top -

$('#newbox').offset().top +

$('#newbox').scrollTop() });

})

其中​$('#newbox')就是选择对应能滚动的div；

当然如果你不喜欢动画，可以直接在scrollTop()中获取值来实现瞬间跳跃，但谁不喜欢动画呢？​