本文共 657 字,大约阅读时间需要 2 分钟。
最近工作遇到了相关问题,决定总结一番;
当页面的整体长度过程或者说内容过多的时候,导航的出现是必不可少的,通过滚动条滚动导航是一种改善用户体验的好方法,它的作用不但可以改善用户查阅效率,最重要是炫好吧!既然这么酷,实现方法是什么?不急我们慢慢分析。。
首先页面有很多内容,分很多模块,像新闻一样,一个个的向下排列。然后编写相应的菜单链接想要对应相应位置,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()中获取值来实现瞬间跳跃,但谁不喜欢动画呢?
转载地址:https://blog.csdn.net/weixin_33958381/article/details/117850731 如侵犯您的版权,请留言回复原文章的地址,我们会给您删除此文章,给您带来不便请您谅解!