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

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

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

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

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

  1. 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. MySQL 常用命令（3）------表基本操作

    五.表的基本操作 1.创建表 语法:create table <表名> ( <字段名1> <类型1> [,..<字段名n> <类型n>]); ...

  2. jmeter非GUI模式运行-分布式测试

    上一篇文章我们说到了jmeter命令行运行但是是单节点下的, jmeter底层用java开发,耗内存.cpu,如果项目要求大并发去压测服务端的话,jmeter单节点难以完成大并发的请求,这时就需要对j ...

  3. Angular前端调用asp.net core web api后端,报跨域问题

    在 ASP.NET Core 中启用跨域请求 (CORS) https://docs.microsoft.com/en-us/aspnet/core/security/cors?view=aspnet ...

  4. Pytest之参数化

    在unittest测试中,有参数化的概念,那么在pytest中也有. 如何理解参数化: 当对一个测试函数进行测试时,通常会给函数传递多组参数.比如测试账号登陆,我们需要模拟各种千奇百怪的账号密码.可以 ...

  5. 我的第一周C语言作业

    这个作业属于哪个课程 https://edu.cnblogs.com/campus/zswxy/SE2020-2 这个作业要求在哪里 https://edu.cnblogs.com/campus/zs ...

  6. C++ push_back()函数应用

    最近在学习Opencv,用C++写程序,做了一个虚拟画笔的项目,即通过摄像头采集视频图像信息,识别视频中的画笔,并画笔在空中的划痕显示在视频图像上.在进行到划痕显示的,由于视频是实时采集的,检测到的画 ...

  7. ethcat开发记录 二

    SOEM移植到stm32f407+LAN8720硬件上的注意点 1.LAN8720的PHY地址问题. 2.LAN8720芯片在上电后要对复位引脚操作. 3.使能LAN8720的混杂模式,在新的HAL库 ...

  8. Android中的特殊权限

    AndroidManifest中定义的权限分为普通权限,危险权限和特殊权限. 普通权限指的是不会威胁到用户的安全和隐私的权限,只需要在AndroidManifest中声明一下就能直接使用. 危险权限指 ...

  9. 【摘】python和它的内置类型子类化

    python和它的内置类型子类化 看个好玩的东西 class Folder(list): def __init__(self, name): self.name = name def dir(self ...

  10. 20201003--统计数字字符个数（奥赛一本通 P98 1--字符类型和字符数组）

    输入一行字符,统计出其中数字字符的个数 输入:一行字符串,总长度不超过255 输出:一行,输出字符串里面数字字符的个数. 样例输入:Peking University is set up at 189 ...