只需少量代码即可实现流畅的滚动到顶部按钮

本文部分原始内容已存档。之前的文章展示了如何使用按钮元素创建此组件。后来我了解到一个更好的方法是使用锚元素创建此组件，并将其链接到“跳过导航链接”。如果您愿意，可以阅读已存档的文章。

对于需要滚动几次才能阅读所有内容的页面来说，滚动到顶部按钮非常实用。对于超长的页面，滚动按钮效果更佳。对于某些用户来说，滚动页面是一项繁重的工作，尤其是在移动设备上。而我们（网站创建者）可以大大减少滚动页面所需的工作量，并且只需付出很少的努力。

一个例子是WAI-ARIA 创作实践，在撰写本文时，它的高度为 140,923 像素。我不是在夸大其词，这只是我在整个互联网上最喜欢的页面之一！它是制作可访问自定义组件的绝佳资源。

制作一个滚动到顶部的按钮并使其平滑滚动可能比你想象的要容易得多。绝对比我想象的要容易得多！我即将展示的代码片段适用于 React 和 SCSS，但你也不需要了解。这里的基本概念适用于 JavaScript 和 CSS。我们还将介绍如何在存在可访问性问题时消除平滑滚动。这种方法最棒的地方是什么？它不需要焦点管理！🎉

先决条件

如果您还没有，则需要为您的网站添加一个跳过导航链接。这同样快速简便，以下说明参考了我在我的网站上使用的链接。不知道该怎么做？那就阅读我的文章《如何为我的 Next.js 网站添加跳过导航链接》吧！

React 代码

您可能已经在我的“跳过导航链接”文章中读到过，我使用Next.js 的每页布局来帮助我在多个页面上渲染重复的内容，例如导航链接。我用于导航标题的布局是放置“跳过导航链接”和“滚动到顶部”链接的位置。代码如下所示：

import styles from './base-layout.module.css';

const BaseLayout = ({ children }) => {
  return (
    <div>
      <a href="#main-content" id="skip-navigation-link">
        Skip Navigation
      </a>
      <SiteHeader />
      <main id="main-content" tabIndex={-1}>
        {children}
      </main>
      <a href="#skip-navigation-link">Back to Top</a>
      <SiteFooter />
    </div>
  );
};

这段代码的重要内容是：

1. 滚动到顶部链接转到页面上第一个可聚焦控件，该控件应该是跳过导航链接。
2. hrefScroll-top-Top 链接的 匹配Skip idNavigation Link 的 。

SCSS 代码

下面的代码采用了可访问性和浏览器支持优先的方法。它没有将滚动的默认行为设置为平滑，因为这种动画可能会对某些人（包括我自己）造成身体伤害，而是仅在满足以下两个条件时才应用平滑滚动：

1. 该prefers-reduced-motion查询受支持（请参阅 CanIUse.com 页面）
2. 该设置的值是no-preference（不幸的是，这是默认值）

html {
  @media (prefers-reduced-motion: no-preference) {
    scroll-behavior: smooth;
  }
}

需要注意的是，此功能scroll-behavior尚未获得浏览器的完整支持。截至撰写本文时，Safari 浏览器仍在开发该功能。

结论

就是这样！其实只需要几行代码。添加这些代码后，每个人都能快速滚动到网站顶部。而且，你还确保了你的网站不会意外伤害那些无法忍受动画效果的用户！干得好！我为你感到骄傲！