CSS scroll-behavior

`scroll-behavior`

当滚动通过导航或者 CSSOM 滚动 API 触发时的滚动行为

只有两个关键字属性值.

auto: 立刻滚动到目标位置
smooth: 平滑的滚动.

📕注意除了上面两种滚动触发外的任何滚动, 比如用户使用鼠标滚动, 都不会被这个属性影响.

当这个属性在定义在标签, 其作用域整个视窗. 如果这个属性定义在将不会作用于视窗.

📕浏览器可以忽略这个属性的值😅

先看代码

<body>
  <nav>
    <a href="#section1">1a>
    <a href="#section2">2a>
    <a href="#section3">3a>
  nav>
  <section class="container">
    <section class="section" id="section1">1section>
    <section class="section" id="section2">2section>
    <section class="section" id="section3">3section>
  section>
body>
1
2
3
4
5
6
7
8
9
10
11
12

.container {
  height: 200px;
  border: 1px solid #111;
  overflow-y: scroll;
  scroll-behavior: smooth;
}
.section {
  font-size: 48px;
  text-align: center;
  height: 100%;
  line-height: 200px;
}
1
2
3
4
5
6
7
8
9
10
11
12

上面我们是通过标签的 href 属性链接到页面的不同位置从而实现的滚动.
在这里插入图片描述

接下来通过 JavaScript 修改网页 URL 中的 hash 部分实现滚动, 再来看效果

📕不仅仅纵向可以滚动, 横向也可以哦

回到顶部

因此, 可以实现简单的回到顶部的效果. 只需要将标签的 href 属性设置为 # 或者 #top 即可

<div class="back-to-top">
  <a href="#">⬆️a>
div>
1
2
3

.back-to-top {
  width: 50px;
  height: 50px;
  text-align: center;
  position: fixed;
  bottom: 2rem;
  right: 2rem;
  border-radius: 50%;
  background-color: #e74c3c;
  box-shadow: 1px 1px 10px 10px rgba(0, 0, 0, .1);
}
.back-to-top a {
  line-height: 50px;
}
html {
  scroll-behavior: smooth;
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17

👷注意, 如果要实现平滑的滚动, 一定要给 html 添加 scroll-behavior 而不是给 body 添加!!!不然没有效果的

相关阅读:
桌面运维类面试非技术问题
ROS2入门之基本介绍
ArcGIS基础实战：面数据拓扑创建和错误修改全流程
markdown使用教程
精通 VS 调试技巧,学习与工作效率翻倍!
Jackson ImmunoResearch通过 SDS-PAGE 进行蛋白质分离
ORA-01950 对表空间无权限
微信小程序 springboot旅游景点门票预订服务系统
C/C++自助攒机系统
【CS.PL】Lua 编程之道: 基础语法和数据类型 - 进度16%

原文地址：https://blog.csdn.net/broken_promise/article/details/126616212