100字范文,内容丰富有趣,生活中的好帮手!
100字范文 > 页面锚点链接点击平滑滚动

页面锚点链接点击平滑滚动

时间:2019-05-03 00:14:13

相关推荐

页面锚点链接点击平滑滚动

页面通过锚点跳转到指定位置添加平滑滚动效果,当点击锚点时可以平滑滚动到下一个锚点位置。

一点思路

给需要跳转的节点添加相同的类名section,通过点击事件获取需要跳转的节点索引值$key,使用animate添加动画效果,相对简单

$('html,body').animate({scrollTop: $(".section").eq($key).offset().top}, 1000, function () {});

出现问题

在滚轮滚动时会出现闪动效果,突然会跳一下,导致滚动失效。查找原因,是因为默认滚动条和添加的滚动事件有冲突。在最外层添加overflow: hidden;禁止滚动条滚动,只使用动画添加的滚动效果。

本内容不代表本网观点和政治立场,如有侵犯你的权益请联系我们处理。
网友评论
网友评论仅供其表达个人看法,并不表明网站立场。