码迷,mamicode.com
首页 > Web开发 > 详细

CSS让页面平滑滚动

时间:2018-11-20 01:29:37      阅读:303      评论:0      收藏:0      [点我收藏+]

标签:nim   func   target   query   res   arc   can   平滑滚动   fun   

我们以往实现平滑滚动往往用的是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; }

 

参考文章:

CSS scroll-behavior和JS scrollIntoView让页面滚动平滑

CSS让页面平滑滚动

标签:nim   func   target   query   res   arc   can   平滑滚动   fun   

原文地址:https://www.cnblogs.com/sese/p/9986675.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!