凡是需要滚动的地方都加一句scroll-behavior:smooth 来提升滚动体验！

经常使用的锚点定位功能就有了平滑定位功能，如
<a href="#">返回顶部</a>

全局css中也建议添加
html, body { scroll-behavior:smooth; }

在html里添加scroll-behavior属性，代表一个滚动框指定滚动行为。

该属性有两个值，auto：立即滚动；smooth ：平稳丝滑的滚动。默认为auto。

html{ scroll-behavior:smooth }

IE可能不兼容！！

CSS 平滑滚动 scroll-behavior: smooth的更多相关文章

  1. CSS让页面平滑滚动

    我们以往实现平滑滚动往往用的是jQuery, 如实现平滑回到顶部,就写如下代码: $('.js_go_to_top').click(function () { $(".js_scroll_a ...

  2. CSS中overflow:scroll怎么设置只上下滚动而不左右滚动

    CSS中"overflow:scroll"默认是左右,上下都滚动.怎么设置只上下滚动而不左右滚动,下面有个不错的解决方法 CSS中"overflow:scroll&quo ...

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

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

  4. scrollIntoView 与平滑滚动

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

  5. 【前端性能】高性能滚动 scroll 及页面渲染优化

    最近在研究页面渲染及web动画的性能问题,以及拜读<CSS SECRET>(CSS揭秘)这本大作. 本文主要想谈谈页面优化之滚动优化. 主要内容包括了为何需要优化滚动事件,滚动与页面渲染的 ...

  6. 【前端性能】高性能滚动 scroll 及页面渲染优化--转发

    本文主要想谈谈页面优化之滚动优化. 主要内容包括了为何需要优化滚动事件,滚动与页面渲染的关系,节流与防抖,pointer-events:none 优化滚动.因为本文涉及了很多很多基础,可以对照上面的知 ...

  7. 高性能滚动 scroll 及页面渲染优化

    最近在研究页面渲染及web动画的性能问题,以及拜读<CSS SECRET>(CSS揭秘)这本大作. 本文主要想谈谈页面优化之滚动优化. 主要内容包括了为何需要优化滚动事件,滚动与页面渲染的 ...

  8. 前端高性能滚动 scroll 及页面渲染优化

    前言 最近在研究页面渲染及web动画的性能问题,以及拜读<CSS SECRET>(CSS揭秘)这本大作.本文主要想谈谈页面优化之滚动优化. 主要内容包括了为何需要优化滚动事件,滚动与页面渲 ...

  9. jquery详解图片平滑滚动

    jquery详解图片平滑滚动 随便写了个DOM,没有美观性,见谅 原理: 1.定义两组ul列表放图,第一个ul放5张图,第二个ul为空 2.为什么要用两个ul?因为要用到jQuery的克隆方法clon ...

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

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

随机推荐

  1. 获取网页数据 Qt 从客户端发起http响应

    Qt 从客户端发起http响应 获取网页数据实现代码 void Test::GetHttp(QString strServerIP,QString strUserName,QString strPas ...

  2. 初步使用Web Notification 实现浏览器消息通知

    mesgNotice(data){ if(data.length>0){ if(window.Notification && Notification.permission != ...

  3. mysql5.7主从多线程同步

    数据库复制的主要性能问题就是数据延时 为了优化复制性能,Mysql 5.6 引入了 "多线程复制" 这个新功能 但 5.6 中的每个线程只能处理一个数据库,所以如果只有一个数据库, ...

  4. Java+selenium自动爬取网站内容并写入本地

    目的:本文主要描述如何使用Java+selenium爬取58同城招聘页,并记录指定职位的招聘公司名保存到本地 一.首先创建一个maven工程,配置依赖包 1 <dependencies> ...

  5. 搭建python+appium环境的时候遇到 'could not find adb.exe!'的问题

    搭建Android环境的时候遇到 'could not find adb.exe!'的问题 如果是在的C:\android-sdk-windows\tools目录下并没有adb.exe这个可执行文件. ...

  6. redis 数据库在linux下的安装配置与使用

    linux安装redis 完整步骤(1)安装: 1.获取redis资源 wget http://download.redis.io/releases/redis-4.0.8.tar.gz 2.解压 t ...

  7. noi 1.1 2 输出第二个整数

    描述 输入三个整数,把第二个输入的整数输出. 输入 只有一行,共三个整数,整数之间由一个空格分隔.整数是32位有符号整数. 输出 只有一行,一个整数,即输入的第二个整数. 样例输入 123 456 7 ...

  8. 前端通过input 输入框实现动态添加行 , 键盘上下左右点击可同步操作中心位置

    1. input 代码 ,我们项目组的input封装了,不过不影响使用 通过 @keyup 事件绑定show方法,需要将当前行的信息以及index传递,方便操作 另外要单独给这些需要操作的输入框添加c ...

  9. Apple Sources

    1. libsystem_malloc.dylib的源码 https://opensource.apple.com/tarballs/libmalloc/ .这里有多个版本(例如用otool找到iOS ...

  10. UE4 编辑器的非运行时，给StaticMeshActor设置StaticMesh

    用 UAssetManager::GetStreamableManager().LoadSynchronous<UStaticMesh>(FSoftObjectPath(packagePa ...