凡是需要滚动的地方都加一句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. ARC(Automatic Reference Counting)自动引用计数 unowned、weak 使用区别

    自动引用计数 引用类型(类.函数.闭包) 当声明一个变量指向某个引用类型时 当前引用类型的引用计数就会加1 当变量不指向该类型时 引用类型就会 -1 当引用计数为0时  当前引用类型就会被系统回收 i ...

  2. IntelliJ IDEA 工具识别不了 过大Java文件 引用识别的不了的文件报错

    之前出现过proto 生成的文件过大 idea 识别不了 引用消息报错. 解决方案 1.找到IntelliJ IDEA 桌面快捷键图标 右键属性 2.打开文件位置,找到所在目录 3.找到idea.pr ...

  3. log调试法

    function writeToTxt($data,$filename="debug"){     if(is_array($data)){         file_put_co ...

  4. MySQL事务MVCC、undolog和redolog

    MySql的MVCC多版本控制 undolog:回滚日志(保证一致性)只有在ReadCommited和RepeatableRead隔离级别有用 redolog:重写日志(保证持久性) 示例讲解 Rea ...

  5. nodejs 配置国内镜像

    npm config set registry https://registry.npm.taobao.org npm config set disturl https://npm.taobao.or ...

  6. Python+Django(4）——创建其他网页（模板继承）

    模板继承: 1,修改主页 父模板:抽取通用元素,在index.html同级目录下新建base.html <p> <a href="{% url 'learning_logs ...

  7. ubuntu安装xface

    Gnome.KDE.XFACE桌面环境安装和卸载 出自Ubuntu中文 安装桌面环境 (一)在终端中运行安装: 1.安装XFACE: sudo apt-get install xubuntu-desk ...

  8. reactHooks_useEffect

    当在直接在组件内使用setState时,会产生"渲染次数过多"的错误 例如: const A = ( ) => {   const [num,setNum] = useSta ...

  9. [CQOI2014]通配符匹配 题解

    第一眼:什么鬼东西ヾ(｡｀Д´｡) 第二眼:显然,这道题要分段处理 类似[TJOI2018]碱基序列\ (建议做一做也是Hash+DP)\ 那你怎么第一眼没看出来 Hash处理+DP==AC 直接上代 ...

  10. day01学习小记

    # Markdown学习 ## 标题 ### 三级标题 #### 四级标题 ## 字体 Hellow,World! Hellow,world hellow,world! hellow,world ## ...