我们以往实现平滑滚动往往用的是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让页面平滑滚动的更多相关文章

  1. 【前端】jQuery实现锚点向下平滑滚动特效

    jQuery实现锚点向下平滑滚动特效 实现效果: 实现原理: 使用jQuery animate()方法实现页面平滑滚动特效 $('html, body').animate({scrollTop: $( ...

  2. ScrollTo：实现平滑滚动到页面指定位置

    ScrollTo:实现平滑滚动到页面指定位置 ScrollTo是一款基于jQuery的滚动插件,当点击页面的链接时,可以平滑地滚动到页面指定的位置.适用在一些页面内容比较多,页面长度有好几屏的场合,本 ...

  3. 页面中的平滑滚动——smooth-scroll.js的使用

    正常的本页面锚链接跳转的时候跟PPT似的,特别生硬,用户体验非常差. 这时候我们就可以借助smooth-scroll.js这个插件,来实现本页面的平滑的跳转. 1首先,导入必须的JS文件 <sc ...

  4. [js常用]页面滚动的顶部,指定位置或底部,平滑滚动

    js平滑滚动到顶部.底部.指定地方 <!DOCTYPE html> <html lang="en"> <head> <meta chars ...

  5. 原生js 平滑滚动到页面的某个位置

    window.scrollTo() 语法1:  window.scrollTo(x-coord,y-coord) x-coord 是文档中的横轴坐标. y-coord 是文档中的纵轴坐标. 例子: w ...

  6. scrollTop如何实现click后页面过渡滚动到顶部

    用JS操作,body元素的scrollTop var getTop = document.getElementById("get-top"); var head = documen ...

  7. scrollIntoView 与平滑滚动

    经常有这样的需求:点击一个链接(内链)跳转到当前页面中间某个部分.对于这样的需求,很容易想到使用锚点实现.但有一个问题:滚动一步到位,太生硬了. 我还是比较喜欢平滑滚动.HTML5 中提供了 CSS ...

  8. 用 CSS 隐藏页面元素

    用 CSS 隐藏页面元素有许多种方法.你可以将 opacity 设为 0 将 visibility 设为 hidden 将 display 设为 none 将 position 设为 absolute ...

  9. js平滑滚动到顶部,底部,指定地方

    [原文链接] 采用锚点进行页面中的跳转的确很方便,但是要想增加网页的效果,可以使用jquery中的animate,实现滚动的一个动作,慢慢的滚动到你想跳转到的位置,从而看起来会非常高大上. [示例演示 ...

随机推荐

  1. HDU.6155.Subsequence Count(线段树 矩阵)

    题目链接 首先考虑询问[1,n]怎么做 设 f[i][0/1]表示[1,i]以0/1结尾的不同子序列个数 则 \(if(A[i]) f[i][1] = f[i-1][0] + f[i-1][1] + ...

  2. Putty 工具使用

    如何使用Putty远程(SSH)管理Linux VPS Putty是一个免费的.Windows 32平台下的telnet.rlogin和ssh客户端,但是功能丝毫不逊色于商业的telnet类工具.用它 ...

  3. jmeter测试服务器压力

    http://blog.csdn.net/BobChao0730/article/details/51352768 http://blog.csdn.net/u011943953/article/de ...

  4. 安装Git 创建版本库

    安装git [root@node1 ~]# yum -y install git 创建用户 因为Git是分布式版本控制系统,所以,每个机器都必须自报家门:你的名字和Email地址 [root@node ...

  5. spring cloud: 使用consul来替换eureka

    eureka官方已经正式宣布:自2.0起不再维护该项目,并在github 项目wiki上放出了一段吓唬人的话: 大意就是:从2.x起,官方不会继续开发了,如果需要使用2.x,风险自负.但其实我觉得问题 ...

  6. Error-MVCr：找到了多个与 URL 匹配的控制器类型。如果多个控制器上的特性路由与请求的 URL 匹配，则可能会发生这种情况。

    ylbtech-Error-MVCr:找到了多个与 URL 匹配的控制器类型.如果多个控制器上的特性路由与请求的 URL 匹配,则可能会发生这种情况. 1.返回顶部 1. 找到了多个与 URL 匹配的 ...

  7. 【Storm】一张图搞定Storm的运行架构

  8. Java 8 学习资料汇总【转载】

    原文地址 2014年3月18日,Java SE 8 发布,而 Java 9 预期2016年发布: 2011年7月7日,Java 7 发布,是2009年4月20日被Oracle 以74亿美元收购首次推出 ...

  9. [C++] 左值、右值、右值引用

    一般意义上的左值(lvalue)和右值(rvalue) * lvalue 代表了对象,可通过取地址符获取地址,可赋值.L 可看做 location. * rvalue 代表了数据,不能获取内存地址,不 ...

  10. loopback文件系统

    回环设备(loop-back devices) 实验环境 centos7.2 回环设备( 'loopback device')允许用户以一个普通磁盘文件虚拟一个块设备.(磁盘文件 --> 块设备 ...