CSS让页面平滑滚动
我们以往实现平滑滚动往往用的是jQuery, 如实现平滑回到顶部,就写如下代码:
$(‘.js_go_to_top‘).click(function () { $(".js_scroll_area").animate({scrollTop: 0}, 600); });
我们现在可能通过css实现这一功能了,只需要添加一句样式即可:
scroll-behavior:smooth 兼容情况可以点击这里查看。 摄图网https://www.wode007.com/sites/73204.html VJ师网https://www.wode007.com/sites/73287.html scroll-behavior的使用你就记住这么一句话—— 凡是需要滚动的地方都加一句scroll-behavior:smooth就好了! 你别管他用不用得到,也不用管浏览器兼容性如何,你都加上。这就像一个不要钱的免费抽奖,没有中奖,没关系,又没什么损失,中奖了自然好,锦上添花!scroll-behavior:smooth就是这种尿性。 举个例子,在PC浏览器中,网页默认滚动是在<html>标签上的,移动端大多数在<body>标签上,业界浏览器的css reset都可以加上这么一条规则: html, body { scroll-behavior:smooth; }
相关推荐
jiedinghui 2020-10-25
Ladyseven 2020-10-22
zuncle 2020-09-28
xiaohuli 2020-09-02
葉無聞 2020-09-01
nicepainkiller 2020-08-20
AlisaClass 2020-08-09
myloveqiqi 2020-08-09
buttonChan 2020-08-02
drdrsky 2020-07-29
Ladyseven 2020-07-25
nicepainkiller 2020-07-24
AlisaClass 2020-07-19
hellowzm 2020-07-19
background-color: blue;background-color: yellow;<input type="button" value="变蓝" @click="changeColorT
昔人已老 2020-07-19
lanzhusiyu 2020-07-19
hellowzm 2020-07-19
CSSEIKOCS 2020-07-18
qiupu 2020-11-04