凡是需要滚动的地方都加一句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. 2022-3-8内部群每日三题-清辉PMP

    1.实践敏捷方法的开发负责人被任命为一个项目的迭代经理,该负责人与使用瀑布式方法的业务分析师密切合作,但这两个方法的差异已经开始对团队绩效产生负面影响,项目经理分别与开发负责人和业务分析师就这种情况进 ...

  2. Python3之并发(七)---线程同步队列(queue)

    queue模块实现了多生产者,多消费者队列 queue模块的常用类和异常 queue.Queue(maxsize=0) 先进先出(FIFO)的队列, maxsize: 队列的大小(即队列的元素个数), ...

  3. mysql数据库常用指令

    1.查询当前连接数据库别名 select database(); Current database 项显示当前连接的数据库 2.查询数据表中当天的数据 select * from 表名 WHERE T ...

  4. 20211306 《Python程序设计》实验三报告

    学号 20211306 <Python程序设计>实验三报告 课程:<Python程序设计> 班级: 2113 姓名: 丁文博 学号:20211306 实验教师:王志强 实验日期 ...

  5. 苹果公司对蓝牙免提AT指令的扩充

    介绍 苹果公司对蓝牙HF profile进行了一些HF AT指令的扩充.不过为了兼容起见,尽量实现HF标准规范规定的内容,如果标准规范没有规定相应的内容,为了适配苹果设备新增的功能,还是可以适应苹果公 ...

  6. 关于ERROR 1366 (HY000): Incorrect string value: '\xF0\x9F\x87\xA8\xF0\x9F...'报错的解决心得

    昨天发现MySQL数据库执行发生了报错 ERROR 1366 (HY000): Incorrect string value: '\xF0\x9F\x87\xA8\xF0\x9F...' 马上意识到应 ...

  7. python:包含’e’和‘-’的 str 转 float

    from functools import reduce def str2float(s): s = s.split('.') a = s[0] b = s[1] if a[0] == '-': a ...

  8. Long类型转换为IP String

    package com.barry.iputil.util; public class IPFormat { public static String toIPStr(Long LongIP) { i ...

  9. Layui分页与springboots

    service.java public List<Menu> listAllMenuPage(PageData pd) throws Exception{ List<Menu> ...

  10. sqlite3 一条语句替换全表某个字符字段中的某个字符串

    update not_match_files set policy_id_tms = replace(policy_id_tms, substr(policy_id_tms,instr(policy_ ...