纯CSS实现回到顶部的功能

最新推荐文章于 2024-02-01 16:58:38 发布

前端精髓

最新推荐文章于 2024-02-01 16:58:38 发布

阅读量3.1k

点赞数

本文链接：https://blog.csdn.net/wu_xianqiang/article/details/113617763

版权

如果你的网站有“返回顶部”按钮，并且已经实现平滑滚动。

document.querySelector("#js-scroll-to-top").addEventListener("click", (e) => {
  e.preventDefault();
  window.scroll({
    top: 0,
    left: 0,
    behavior: "smooth"
  });
});

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

<body>
  <style>
    html {
      scroll-behavior: smooth;
    }

    body {
      max-width: 400px;
      font: 24px/2 -apple-system, system-ui;
      margin: 0 auto;
    }

    .bar {
      position: fixed;
      bottom: 0;
      left: 0;
      text-align: center;
      background: lightyellow;
      width: 100%;
      padding: 0.5rem 0.2rem;
    }
  </style>
  <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Eaque excepturi tempora adipisci vero ullam. Assumenda,
    in veritatis nam architecto officiis reprehenderit vitae nulla autem, illum corrupti molestias quia cum omnis.</p>
  <p>Voluptas ducimus quisquam perferendis molestiae accusamus, ea libero assumenda blanditiis architecto! Voluptate
    voluptatum, officia vel omnis similique rerum voluptas natus, veniam obcaecati minus, ullam quo quam ipsa ab animi
    inventore.</p>
  <p>Quisquam illum quasi officia ipsa beatae impedit ipsam voluptas saepe magni accusantium odit mollitia earum
    voluptates dolorum fugiat, optio quia repudiandae aliquam libero. Nostrum illo dolores ullam iusto minus?
    Temporibus?</p>
  <p>Eaque recusandae dignissimos amet commodi, beatae quia iusto dolorum necessitatibus, reiciendis delectus
    perspiciatis pariatur excepturi vel, soluta cumque. Quas perspiciatis facilis quis eos beatae molestias maxime
    tempora eius blanditiis quibusdam.</p>
  <p>Ea exercitationem quod, quisquam laudantium animi magni cum alias voluptas fugiat eum, accusantium nulla quo, dicta
    recusandae dolor dolorem excepturi consequuntur eius ex commodi! Blanditiis vitae veritatis ex quam aspernatur.</p>
  <p>Inventore itaque, vel voluptatum hic incidunt, amet aliquid, harum rerum velit sequi enim? Quisquam sapiente
    repudiandae perspiciatis accusamus repellat asperiores illum autem incidunt. Cumque id possimus est facere. Eos, ex.
  </p>
  <p>Obcaecati suscipit deserunt quae ea. Maiores excepturi doloremque nostrum inventore necessitatibus quo, sit rerum
    nobis explicabo nesciunt rem assumenda, repellat non, commodi dolores. Ipsum placeat, voluptatum asperiores possimus
    iure facere?</p>
  <p>Voluptatibus, recusandae eaque ratione, aliquid esse perspiciatis, commodi sequi cupiditate qui sunt accusantium
    suscipit maxime vel! Dicta voluptatibus enim dolores magnam, ad libero nesciunt esse iste vitae earum possimus
    nostrum.</p>
  <p>Tenetur iusto beatae ut molestiae incidunt reiciendis similique quis voluptas veritatis at laboriosam doloribus nam
    aperiam voluptatibus illo, eius delectus exercitationem harum facere quam cum nihil? Iusto provident eum natus!</p>
  <p>Repellendus rem, adipisci quo harum reiciendis, voluptatum deleniti laudantium, quae nobis voluptatem fuga natus
    numquam nemo quod maiores cum consectetur perspiciatis? Dolorum culpa architecto vero placeat dolores iste, hic
    omnis.</p>
  <p>Accusamus dicta consequatur nam ratione dignissimos quis obcaecati ex eos, assumenda delectus recusandae deserunt
    sapiente! Ullam exercitationem odio ut repudiandae, similique hic quae, placeat distinctio omnis eligendi veritatis
    maxime a?</p>
  <p>Quae facilis consectetur tenetur obcaecati temporibus quaerat repudiandae et reiciendis recusandae explicabo aut
    odio ipsum, illo deleniti beatae, suscipit, ullam facere totam numquam! Possimus similique ipsum quibusdam,
    temporibus officiis officia?</p>
  <p>Facilis beatae iure excepturi laboriosam autem doloremque omnis expedita sed porro incidunt ratione inventore
    placeat, ab molestiae alias distinctio suscipit aut deserunt officia quam corrupti optio cupiditate repellendus.
    Architecto, expedita.</p>
  <p>Earum perferendis reiciendis sequi ex commodi culpa sunt vero, omnis dicta. Qui similique beatae numquam, vero
    expedita pariatur sapiente tempora voluptas fugit? Tenetur officiis voluptatibus repudiandae, vitae ratione fuga
    placeat.</p>
  <p>Hic quibusdam voluptatem corrupti rem rerum minima quis, exercitationem cum fuga nam perferendis omnis mollitia
    praesentium nisi delectus eius consequuntur quasi odit velit nulla! Aliquam sint blanditiis eos aspernatur
    asperiores.</p>
  <p>At sapiente sint mollitia velit, doloribus excepturi quis hic placeat ipsa consectetur nostrum, maxime quasi
    temporibus delectus laudantium aut iusto repellendus alias! Corporis, magni dolorum error in provident praesentium
    quidem?</p>
  <p>Possimus aliquam quis quidem voluptatum quos unde eius ex fugit, ad vel dolor minima animi repellendus delectus qui
    iure inventore. Iusto totam quaerat sed labore eveniet, odio quo blanditiis consequatur.</p>
  <p>Ad error, a ipsum accusamus quos animi facilis incidunt totam ex delectus aspernatur voluptas, pariatur deserunt
    est quaerat minima possimus quas in assumenda laudantium omnis esse illo. Ducimus, quae sint.</p>
  <p>Iusto, alias accusamus. Doloremque aliquam enim eaque nulla molestiae magnam! Modi laboriosam itaque ipsam eum
    impedit consectetur odio totam est. Ut porro fugiat iste. Voluptatibus delectus consequatur corporis accusantium
    ipsam.</p>
  <p>In odit eaque architecto corrupti quisquam ducimus saepe voluptate repellat recusandae provident natus quo id
    totam, obcaecati fugit ad, molestiae beatae, blanditiis voluptas magni facilis. Magni dolorem est eveniet
    aspernatur?</p>

  <div class="bar">
    <a href="#">CSS回到顶部</a>
    —
    <a href="#" id="js-scroll-to-top">JS回到顶部</a>
  </div>
  <script>
    document.querySelector("#js-scroll-to-top").addEventListener("click", (e) => {
      e.preventDefault();
      window.scroll({
        top: 0,
        left: 0,
        behavior: "smooth"
      });
    });
  </script>
</body>