页面通过锚点跳转到指定位置添加平滑滚动效果,当点击锚点时可以平滑滚动到下一个锚点位置。
一点思路
给需要跳转的节点添加相同的类名section,通过点击事件获取需要跳转的节点索引值$key,使用animate添加动画效果,相对简单
$('html,body').animate({scrollTop: $(".section").eq($key).offset().top}, 1000, function () {});
出现问题
在滚轮滚动时会出现闪动效果,突然会跳一下,导致滚动失效。查找原因,是因为默认滚动条和添加的滚动事件有冲突。在最外层添加overflow: hidden;禁止滚动条滚动,只使用动画添加的滚动效果。