CSS让页面平滑滚动

2020-05-07 18:40:35

参考地址 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; }


  • 精彩推荐

  • 2017-03-27 16:24:26

    laravel，gulp，Browsersync浏览器同步测试

    Browsersync能让浏览器实时、快速响应您的文件更改（html、js、css、sass、less等）并自动刷新页面。更重要的是 Browsersync可以同时在PC、平板、手机等设备下进项调试。您可以想象一下：“假设您的桌子上有pc、ipad、iphone、android等设备，同时打开了您需要调试的页面，当您使用browsersync后，您的任何一次代码保存，以上的设备都会同时显示您的改动”。无论您是前端还是后端工程师，使用它将提高您30%的工作效率。

  • 2017-03-28 09:27:41

    Java中Arrays的asList()方法

    Java中Arrays的asList()方法 可以将 数组转为List 但是，这个数组类型必须是 引用类型的，如果是8中基本数据类型就不可以 原因如下，引用别人的一篇文章：

  • 2017-03-28 10:58:01

    No such property: sonatypeRepo for class:

    这种问题一般是出现在导入一些开源项目的时候。原因为该项目的原作者会把项目发布到maven中央仓库中，所以在gradle中添加了相关的maven发布任务，而发布任务需要配置

  • 2017-04-02 00:42:51

    PHP的pm、pm.max_requests、memory_limit参数优化说明

    pm是来控制php-fpm的工作进程数到底是一次性产生固定不变（static）还是在运行过程中随着需要动态变化（dynamic）。众所周知，工作进程数与服务器性能息息相关，太少则不能及时处理请求，太多则会占用内存过大而拖慢系统。

  • 2017-04-02 00:44:46

    NGINX + PHP-FPM 502 相关事

    NGINX + PHP-FPM 报 502 错误，我想大部分 SA 都遇到过吧。 根据报错的频率，可以分为两种情况，间歇性的502和连续性的502。 这里只讨论第一种情况——间歇性的502。