使用Css实现与JavaScript相同的丝滑锚点滚动效果

曾经我认为网站的锚点滚动效果都是使用Javscript实现的,如果不用js实现的话就是一瞬间就跳转到了,用户体验较差
看了大部分网站都是用js实现的,直到我写了Hexo的Hexo-MengD(萌典)主题后
了解到了很多前端更深层的一些知识,我才知道原来这种效果可以使用css实现,甚至只需要一行即可实现,而如果使用的是js实现的话,少则50行代码、多则100+行代码
现在就只需要一行css就能实现,而且css的效率是完全吊打js的

COPY
1
2
3
html{
scroll-behavior: smooth;
}

就给html标签添加一个css属性样式就可以了,没了(是不是很震惊?)

Authorship: Lete乐特
Article Link: https://blog.imlete.cn/article/Css-Anchor-scroll.html
Copyright: All posts on this blog are licensed under the CC BY-NC-SA 4.0 license unless otherwise stated. Please cite Lete乐特 's Blog !