凡是需要滚动的地方都加一句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. QTableWidget CSS样式

    QTableWidget { border:1px solid rgb(170, 170, 127); border-radius:3px; } QScrollBar::handle { backgr ...

  2. [BOM]分解url参数

    分解页面 url 传入参数 转载: 来自https://www.jianshu.com/p/6dd040f6800d function init_params() { var url = locati ...

  3. 每日一抄 Go语言通信顺序进程简述

    package main import ( "fmt" "sync" ) /* Go实现了两种并发形式,第一种是大家普遍认知的多线程共享内存,其实就是 Java ...

  4. MongoDB和sql语句的对照

    左边是mongodb查询语句,右边是sql语句.对照着用,挺方便. db.users.find() select * from users db.users.find({"age" ...

  5. 通过python程序让MySQL利用binlog恢复误操作数据

    MySQL利用binlog恢复误操作数据 在人工手动进行一些数据库写操作的时候(比方说数据订正),尤其是一些不可控的批量更新或删除,通常都建议备份后操作.不过不怕万一,就怕一万,有备无患总是好的.在线 ...

  6. spider_使用urllib库 提交post请求，有道翻译案例

    """使用urllib库 提交post请求, 有道翻译"""from urllib import requestfrom urllib im ...

  7. CSR,SSR,PreRender原理解密

    CSR.SSR.Prerender 原理全解密   做前端的同学们肯定或多或少听说过CSR,SSR,Prerender这些名词,但是大多肯定只是停留在听说过,了解过,略懂一点,但是,你真的理解这些技术 ...

  8. 杭电OJ--1048-C++实现

    #include <iostream>#include<vector>#include<string>#include<cctype>#include& ...

  9. python学习笔记-简介

    python简介 python是一种简单易学,功能强大的编程语言,他有高效的高层数据结构,简单而有效的实现面向对象编程.python是一种解释性语言,在多数平台的多个领域都是理想的脚本语言,特别适用于 ...

  10. kali2020-bash: openvas-setup：未找到命令 ，解决办法

    将openvas-setup命令换成 gvm-setup命令即可