凡是需要滚动的地方都加一句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. node.js 新手快速入门

    我当初学的时候,是在大大们的指导下开始学习的,用了3天搞定大大们给的任务.下面我就把这个经历分享出来,让大家借鉴一下.欢迎吐槽~~ 任务如下: 根据Node js 开发入门教程第五章的一个使用node ...

  2. js时间转化为几天前,几小时前，几分钟前

    在前面一篇文章中,我们学习到了如何获取时间和怎么算出两者之间的时间差 今天看看怎么将时间戳转换为几个月前,几周前,几天前,几分钟前的形式.与上面类似通过JavaScript计算当前时间与定义的时间的对 ...

  3. docker搭建phpswoole实现http服务

    一.创建Dockerfile FROM phpswoole/swoole # COPY ./www/ /var/www/ 二.同级目录下创建docker-compose.yml services: p ...

  4. FFmpeg 摄像头采集

    FFmpeg 摄像头采集 extern "C" { #include "libavcodec/avcodec.h" #include "libavfo ...

  5. WebService接口实际场景应用（一）

    背景:要求写一套接口测试工具.过程中遇到了WebService接口的问题,遂写下本篇文章. 阶段问题1: 需要利用数据驱动,然后读取excel中的数据并直接调用.但是webService接口与http ...

  6. noi 1.1 5 输出保留12位小数的浮点数

    描述 读入一个双精度浮点数,保留12位小数,输出这个浮点数. 输入 只有一行,一个双精度浮点数. 输出 也只有一行,保留12位小数的浮点数. 样例输入 3.1415926535798932 样例输出 ...

  7. idea中的快捷键

  8. POJ--2386题C++实现

    本题利用深度遍历的穷竭搜索法进行解题,即对每一个元素都对其进行各个方向的深度遍历,穷尽其周围 #include<iostream>#include<cstdio>using n ...

  9. win7下MongoDB安装配置

    之前看windows下安装MongoDB操作很是简单,今天在自己笔记本上安装一次,各种小问题.参照网上各大神帖子,再记录下个简单流程以便以后记得. 1.MongoDB官网上下载安装包 2.运行安装包, ...

  10. md5加密中文windows和linux不一致

    测试环境springboot md5加密结果不一致 linux启动的时候 java -Dfile.encoding=utf-8 -jar xxx.jar   即可.主要是编码不一致导致.