CSS scroll-behavior

最新推荐文章于 2025-10-16 17:38:19 发布

原创最新推荐文章于 2025-10-16 17:38:19 发布 · 584 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#css #css3 #前端

css 专栏收录该内容

51 篇文章

订阅专栏

本文介绍了CSS中scroll-behavior属性的用法，包括如何实现平滑滚动效果，以及如何通过JavaScript修改URL中的hash来触发滚动。文章还提供了代码示例，展示了如何在实际项目中应用此属性。

`scroll-behavior`

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

只有两个关键字属性值.

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

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

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

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

先看代码

<body>
  <nav>
    <a href="#section1">1</a>
    <a href="#section2">2</a>
    <a href="#section3">3</a>
  </nav>
  <section class="container">
    <section class="section" id="section1">1</section>
    <section class="section" id="section2">2</section>
    <section class="section" id="section3">3</section>
  </section>
</body>

.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;
}

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

接下来通过 JavaScript 修改网页 URL 中的 hash 部分实现滚动, 再来看效果
在这里插入图片描述

📕不仅仅纵向可以滚动, 横向也可以哦
在这里插入图片描述

回到顶部

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

<div class="back-to-top">
  <a href="#">⬆️</a>
</div>

.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;
}