我们以往实现平滑滚动往往用的是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. IdentityServer4-快速入门

    一.设置和概述 二.使用客户端凭证保护API 三.使用密码保护API 四.使用OpenID Connect添加用户验证 五.添加对外部认证的支持 六.切换到Hybrid Flow并添加API访问权限 ...

  2. Django之路12——form modelform formset modelformset的各种用法

      首先上结论: form适用于对单个表单的操作,并且需要对每个字段的验证规则自定义. modelform:适用于对用户提交的单个表单操作,字段可以用model中的表的字段来作为验证规则,适用于快速的 ...

  3. POJ.1743.Musical Theme(后缀数组 倍增 二分 / 后缀自动机)

    题目链接 \(Description\) 给定一段数字序列(Ai∈[1,88]),求最长的两个子序列满足: 1.长度至少为5 2.一个子序列可以通过全部加或减同一个数来变成另一个子序列 3.两个子序列 ...

  4. Python3面向对象——案例-01

    经典的策略模式案例 问题描述 使用"策略"设计模式处理订单折扣的 UML 类图 定义一系列算法,把它们一一封装起来,并且使它们可以相互替换.本模式使得算法可以独立于使用它的客户而变 ...

  5. Android弹出Toast工具类总结

    Android弹出Toast工具类总结,包括系统自带的,也包括自定义的. public class ToastUtil { public ToastUtil() { } public static T ...

  6. C# Dictionary<TKey,TValue>如何添加键重复的内容

    这里以Dictionary<string,string>为例 当我们实例化Dictionary<string,string>集合时,其中有一个重载构造方法如下: // // 摘 ...

  7. 使用jetty工具包处理url参数成map

    引入工具包: <dependency> <groupId>org.mortbay.jetty</groupId> <artifactId>jetty-u ...

  8. Spring静态注入的三种方式

    版权声明:本文为博主原创文章,未经博主允许不得转载. https://blog.csdn.net/chen1403876161/article/details/53644024Spring静态注入的三 ...

  9. H5使用Swiper过程中遇到的滑动冲突

    一.问题 (1)PC端可以鼠标可以拖动中间的轮子让页面上下滑动,点击左键按着也是拖不动 (2)手机端浏览H5手指不能滑动页面,导致很多页面下面的文字看不到 二.解决问题 1.下面分先说css的问题,主 ...

  10. pycharm怎么设置代码自动补齐

    代码补全功能在PyCharm上是一流的.默认情况下PyCharm会在你输入的时候给出建议: 由于此功能可有点耗电,你可以通过选择File→Power Save Mode来禁用它.您仍然可以通过Cont ...