我们以往实现平滑滚动往往用的是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. asp.net core2.0学习笔记

    一.Core 1,防止过度发布 2,Main 3,Startup 4,添加过滤器 5,依赖注入 6,中间件 7,静态文件 8,路由 9,环境 10,配置和选项 11,日志 12,使用Sesstion ...

  2. OpenStack容器网络项目Kuryr（libnetwork）

    转:https://www.aliyun.com/jiaocheng/518375.html 摘要:容器近几年非常流行,有很多项目都考虑将容器与SDN结合.Kuryr就是其中一个项目.Kuryr项目在 ...

  3. CodeForces903G Yet Another Maxflow Problem 扫描线 + 线段树 + 最小割

    给定两条链\(A, B\),其中\(A\)链某些点向\(B\)链有连边,支持修改\(A\)链中的某条边权以及查询\(A_1\)到\(B_n\)的最大流 显而易见,\(A\)和\(B\)链中一定满足左部 ...

  4. 喵哈哈村的魔法考试 Round #15 (Div.2) 题解

    哗啦啦村的奇迹果实(一) 题解:显然答案就是最大值减去最小值. #include<bits/stdc++.h> using namespace std; const int maxn = ...

  5. 【译】如何在 Android 5.0 上获取 SD卡 的读写权限

    因为最近项目需要,涉及到 SD卡 的读写操作,然而申请 <!-- 读写权限 --> <uses-permission android:name="android.permi ...

  6. PID控制器（比例-积分-微分控制器）- II

    Table of Contents Practical Process Control Proven Methods and Best Practices for Automatic PID Cont ...

  7. Synchronized、lock、volatile、ThreadLocal、原子性总结、Condition

    http://blog.csdn.net/sinat_29621543/article/details/78065062

  8. 启动vmware虚拟机报错：“无法获得VMCI驱动程序的版本：句柄无效”

    启动vmware虚拟机的时候报错: 找到对应虚拟机的文件夹路径: 用记事本打开CentOS 64位.vmx,找到这么一行: vmci0.present = "TRUE" 把TRUE ...

  9. virtualbox centos安装增强工具和Centos与VirtualBox共享文件夹设置

    VirtualBox 大家都习惯性把它简称为 Vbox ,比 VM 的体积小.开源.速 度快.不过在使用 VirtualBox  在虚拟机中安装 CentOS 之后,不能直接运行安装好 Virtual ...

  10. 手把手教你整合最优雅SSM框架：SpringMVC + Spring + MyBatis

    在写代码之前我们先了解一下这三个框架分别是干什么的? 相信大以前也看过不少这些概念,我这就用大白话来讲,如果之前有了解过可以跳过这一大段,直接看代码! SpringMVC:它用于web层,相当于con ...