我们以往实现平滑滚动往往用的是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. Linux虚拟地址和物理地址的映射

    ➤背景 一般情况下,Linux系统中,进程的4GB内存空间被划分成为两个部分------用户空间和内核空间,大小分别为0~3G,3~4G.用户进程通常情况下,只能访问用户空间的虚拟地址,不能访问到内核 ...

  2. 正则表达式(特殊字符)/Xpath语法/CSS选择器

    正则表达式(特殊字符) ^ 开头 '^b.*'----以b开头的任意字符 $ 结尾 '^b.*3$'----以b开头,3结尾的任意字符 * 任意长度(次数),≥0 ? 非贪婪模式,非贪婪模式尽可能少的 ...

  3. 使用 SHOW STATUS 查看mysql 服务器状态信息

    在LAMP架构的网站开发过程中,有些时候我们需要了解MySQL的服务器状态信息,譬如当前MySQL启动后的运行时间,当前MySQL的客户端会话连接数,当前MySQL服务器执行的慢查询数,当前MySQL ...

  4. Mac如何找到从AppStore下载的正版Xcode安装包、以及Xcode清理缓存

    前言:本文介绍在Mac下如何找到AppStore下载的安装包路径,以及如何提取出来供以后使用,希望对大家有所帮助(前提:想要提取某个安装包,前提是你正在从AppStore安装这个程序.比如你想提取im ...

  5. ESAPI学习笔记

         ESAPI是owasp提供的一套API级别的web应用解决方案,本人通过对ESAPI和其提供的demo源码学习发现,关键的不是对其所提供的API的使用,而是其web应用安全防御体系的构建的思 ...

  6. 网络的FIN_WAIT_2状态解释和分析

    关于网络设备的FIN_WAIT_2状态解释出处:http://hi.baidu.com/netdemon1981/blog/item/584bfbb2aeb1d4acd9335ad9.html 在HT ...

  7. api日常总结

    异步加载JS和CSS <script type="text/javascript"> (function () { var s = document.createEle ...

  8. Knockout.Js官网学习（Mapping高级用法一）

    前言 有时候,在使用ko.mapping.fromJS的时候,可能有必要去使用mapping的高级用法来定义mapping的详细过程,以后定义了,以后再调用的时候就不必再定义了.这里有一些情形,你可能 ...

  9. Android中将十六进制 颜色代码 转换为int类型数值

    Android中 将 十六进制 颜色代码 转换为  int   类型数值 方法  : Color.parseColor("#00CCFF") 返回 int 数值 来自为知笔记(Wi ...

  10. zabbix用户管理

    zabbix用户管理,主要包括用户增删改查.用户报警媒介管理.用户权限管理. 安装完zabbix后,已经自带了两个用户Admin和Guests 超级管理员默认账号:Admin,密码:zabbix,这是 ...