HTML快速实现平滑滚动效果
最后更新于
这有帮助吗?
最后更新于
这有帮助吗?
这个A标签虽然可以实现锚点的功能
点击的时候呢也能进行跳转
但是哈有一点就是他没有这种动画
大家看
包括呢我们平时使用这个scrollTop
赋值的时候
他也是没有动画打卡
那我今天新学到两个好玩的小东西
第一个就是这个样式scroll behavior smooth
我们把它加上刷新一下大家看
这样就可以有动画了
包括我们用
代码直接修改scrollTop它也是可以的
第二个好玩的呢就是一个JS的方法
我把这个先注释掉
我们可以直接找到这个
比如说我们想跳转到A
我们把这个拿过来 const a
然后 document
query selector
我们把这个a40拿过来
好然后呢我们直接对a
哎对就是这个 (加上behavior: 'smooth'才有动画)
直接 scrollIntoView
就能实现这种效果
然后呢我把这个样式先注释掉大家看
直接通过锚点是没有动画的
但是呢通过JS的话呢
大家看 他就有动画了