CSS让页面平滑滚动
我们以往实现平滑滚动往往用的是jquery, 如实现平滑回到顶部,就写如下代码:
$(‘.js_go_to_top‘).click(function () {
$(".js_scroll_area").animate({scrollTop: 0}, 600);
});我们现在可能通过css实现这一功能了,只需要添加一句样式即可:
scroll-behavior:smooth
兼容情况可以点击这里查看。
scroll-behavior的使用你就记住这么一句话——
凡是需要滚动的地方都加一句scroll-behavior:smooth就好了!
你别管他用不用得到,也不用管浏览器兼容性如何,你都加上。这就像一个不要钱的免费抽奖,没有中奖,没关系,又没什么损失,中奖了自然好,锦上添花!scroll-behavior:smooth就是这种尿性。
举个例子,在PC浏览器中,网页默认滚动是在<html>标签上的,移动端大多数在<body>标签上,业界浏览器的CSS reset都可以加上这么一条规则:
html, body { scroll-behavior:smooth; }
本文内容仅供个人学习、研究或参考使用,不构成任何形式的决策建议、专业指导或法律依据。未经授权,禁止任何单位或个人以商业售卖、虚假宣传、侵权传播等非学习研究目的使用本文内容。如需分享或转载,请保留原文来源信息,不得篡改、删减内容或侵犯相关权益。感谢您的理解与支持!