纯CSS实现返回顶部的功能-技术圈

下面是 css 锚点跳转的一个例子：

 <style>    #page-1 {      width: 100%;      height: 800px;      background: red;      font-size: 120px;      text-align: center;    }    #page-2 {      width: 100%;      height: 800px;      background: green;      font-size: 120px;      text-align: center;    }    #page-3 {      width: 100%;      height: 800px;      background: blue;      font-size: 120px;      text-align: center;    }style>
<body>  <div id="app">    <nav>      <a href="#page-1">1a>      <a href="#page-2">2a>      <a href="#page-3">3a>    nav>    <div id="page-1">1div>    <div id="page-2">2div>    <div id="page-3">3div>  div>body>

实现的效果是点击对应的 a 标签可以跳转到对应的 div 内容。

但是没有实现平滑滚动，比如下面图片的那种效果。

‍‍

我们可以使用：scroll-behavior: smooth;

html {  scroll-behavior: smooth;}

MDN ：CSS 属性 scroll-behavior 为一个滚动框指定滚动行为，其他任何的滚动，例如那些由于用户行为而产生的滚动，不受这个属性的影响。在根元素中指定这个属性时，它反而适用于视窗。

通常我们使用 JS 实现返回顶部的功能：

document.querySelector("#js-scroll-to-top").addEventListener("click", (e) => {  e.preventDefault();  window.scroll({    top: 0,    left: 0,    behavior: "smooth" // 指定滚动是否应该平滑进行，还是立即跳到指定位置。  });});

当点击“返回顶部”按钮时，用户会看到一些吸引眼球的内容，并且希望停止滚动，因此当他们再次操作鼠标滚轮进行了繁琐的滚动操作，就需要立即停止滚动。通过上面代码的 JS 是无法实现的，但是我们可以通过属性 scroll-behavior 配合锚点跳转来实现。

<style>    html {      scroll-behavior: smooth;    }style>
<body>  <div id="app">    <a href="#">回到顶部a>  div>body>

这样就可以了。