我们以往实现平滑滚动往往用的是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. LCD带字符液晶显示Ｉ　ＬＯＶＥ　YOU

    1602是字符型液晶,内含128个ASCLL字符型的字符库,故可以显示ASCLL字符,而不能显示汉字. 1602可以显示两行信息,每行16个字符,5V电源供电,带有背光. 知识点: #include ...

  2. [NOIp2013普及组]车站分级

    思路: 对于每一趟车,将区间内所有经停的站和所有未经停的站连一条边,表示前者优先级一定高于后者,然后用Kahn跑一遍拓扑排序即可.然而这样会创造大量多余的边,会TLE1个点.考虑一种优化:因为每趟车本 ...

  3. memcache 在php中的用法

    memcached 的安装方法详见我博客的另一个页面:http://www.cnblogs.com/chrdai/p/6656443.html 用法: 一.memcache 连接命令: 1.memca ...

  4. Structured Streaming教程(1) —— 基本概念与使用

    近年来,大数据的计算引擎越来越受到关注,spark作为最受欢迎的大数据计算框架,也在不断的学习和完善中.在Spark2.x中,新开放了一个基于DataFrame的无下限的流式处理组件--Structu ...

  5. Tomcat服务器配置https双向认证（使用keytool生成证书）

    一,HTTPS原理   1,HTTP.HTTPS.SSL.TLS介绍与相互关系 (1)HTTP:平时浏览网页时候使用的一种协议.HTTP协议传输的数据都是未加密的(明文),因此使用HTTP协议传输隐私 ...

  6. Spark2.2+ES6.4.2（三十二）：ES API之index的create/update/delete/open/close（创建index时设置setting，并创建index后根据avro模板动态设置index的mapping）

    要想通过ES API对es的操作,必须获取到TransportClient对象,让后根据TransportClient获取到IndicesAdminClient对象后,方可以根据IndicesAdmi ...

  7. 最新版本Zabbix3.4+Grafana5 整合部署

    一.Grafana简介 Grafana是一个可视化面板(Dashboard),有着非常漂亮的图表和布局展示,功能齐全的度量仪表盘和图形编辑器,支持Graphite.elasticsearch.zabb ...

  8. log4net.Layout.PatternLayout 用 conversion 模式格式化日志事件【翻译】

    原文地址 log4net.Layout.PatternLayout,是一个灵活的布局,配置模式字符串. 线程安全.该类型的 Public static 成员对多线程操作是安全的.实例成员不保证线程安全 ...

  9. Apache Kafka学习 (二) - 多代理(broker)集群

    1. 配置server.properties > cp config/server.properties config/server-1.properties> cp config/ser ...

  10. M1 卡技术规范

    射频卡简单来讲就是卡的一种工作方式,通过感应的方式来工作,也能够把全部的感应卡都统称为射频卡. IC卡的范围比較广.芯片外露的接触式IC卡.芯片内置的感应式IC卡和双界面IC卡都可统称为IC卡.IC卡 ...