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; }


  • 2019-01-01 21:38:51

    php使用curl设置超时的重要性

    网站登录不了,原因是没有可用的 PHP 子进程来响应新的请求了。这可能是是由于PHP-curl 没有设置超时时间引起的。

  • 2019-01-01 21:42:34

    php-fpm 启动参数及重要配置详解

    如果file_get_contents请求的远程资源如果反应过慢,file_get_contents就会一直卡在那里不会超时。我们知道php.ini 里面max_execution_time 可以设置 PHP 脚本的最大执行时间,但是,在 php-cgi(php-fpm) 中,该参数不会起效。真正能够控制 PHP 脚本最大执行时间的是 php-fpm.conf 配置文件中的request_terminate_timeout参数。