vanilla_如何使用Vanilla JavaScript实现平滑滚动

vanilla

在这个新教程中，我们将学习如何在网页中实现平滑滚动。 我们将从创建该功能的通用jQuery方法开始。 然后，我们将摆脱jQuery，并讨论两个纯JavaScript解决方案。

只是为了让您了解我们将在本教程中讨论的内容，请查看我们将要构建的一个演示：

让我们开始吧！

1.从HTML标记开始

为了演示起见，我们将定义一个包装在容器中的标头和四个部分。 在标题内，我们将指定一个导航菜单和一个介绍性文本。

每个部分都有一个id其值与菜单链接的href值匹配。 这种关联（我们称为片段标识符 ）将使我们跳到页面的特定部分。

这是HTML：

<div class="container">
  ...
  <header class="page-header">
    <nav>
      <ul>
        <li>
          <a href="#...">...</a>
        </li>
        <!-- more links -->
      </ul>
    </nav>
    <div class="header-text">...</div>
  </header>
</div>
<section class="section" id="">...</section>
<section class="section" id="">...</section>
<section class="section" id="">...</section>
<section class="section" id="">...</section>

2.定义样式

CSS部分将非常简单明了，没什么特别的。

首先，我们将使用CSS Grid来布局页面标题。 菜单将覆盖可用宽度的四分之一，而文本则占剩余的四分之三（响应式内容在这里并不是很重要）：

.page-header {
  display: grid;
  grid-column-gap: 30px;
  grid-template-columns: 1fr 3fr;
  padding: 40px 0;
  border-top: 1px solid;
  border-bottom: 1px solid;
  margin-bottom: 150px;
}

.header-text {
  font-weight: bold;
}

接下来，我们将为这些部分应用一些样式。 最重要的是，我们将确保它们足够高，因此在页面内有足够的滚动效果：

/*CUSTOM VARIABLES HERE*/

.section {
  padding: 150px 0;
}

.section:nth-of-type(1),
.section:nth-of-type(3) {
  background: var(--beige);
}

.section-text {
  margin: 50px 0;
  max-width: 800px;
}

.section-btn {
  display: inline-block;
  color: var(--beige);
  background: var(--black);
  min-width: 200px;
  height: 50px;
  padding: 9px 40px;
  text-align: center;
}

到目前为止，这就是我们所需要的！ 如果现在单击特定链接，我们将立即跳至相关页面部分。

查看我们的初始演示：

基本HTML内容，对不对？ 现在让我们更进一步，学习如何平稳地导航到各个部分。

3.使用jQuery平滑滚动

我们将从流行的jQuery方法开始。 为了使用jQuery创建平滑滚动，我们将利用其animate()方法。

每次单击导航链接时，我们都会做以下事情：

1. 取消其默认行为即可跳转到相应的部分。
2. 获取其href属性值。
3. 通过设置scrollTop属性的动画来平滑导航到关联的部分。 请注意， animate()方法允许我们调整动画速度。 在我们的情况下，动画将持续800毫秒。

这是jQuery代码：

$(".page-header ul a").on("click", function (e) {
  // 1
  e.preventDefault();
  // 2
  const href = $(this).attr("href");
  // 3
  $("html, body").animate({ scrollTop: $(href).offset().top }, 800);
});

和相关的演示：

4.使用Vanilla JavaScript平滑滚动

在这一点上，我们将抛弃jQuery，而专注于本机JavaScript解决方案。 令人高兴的是，它比您预期的要简单得多。

正如我们将在后面的部分中看到的那样，即使浏览器支持不是理想的，我们也可以采取一些措施来克服此限制。

使用scroll()方法

首先，我们将使用scroll()方法。 这种方法的逻辑类似于以前的jQuery实现。

这里的窍门是，在此方法内部，我们将通过behavior配置属性确定滚动行为。 可能的值是auto （默认）和smooth 。 只要将其值设置为smooth ，魔术就会发生，并且我们将能够顺利导航到目标部分。

值得一提的是，在撰写本文时， 规范中没有定义任何用于控制动画速度的speed选项。 如果这不能满足您的需求，则可能必须通过编写自定义代码来扩展本机功能。

这是必需的代码：

const links = document.querySelectorAll(".page-header ul a");

for (const link of links) {
  link.addEventListener("click", clickHandler);
}

function clickHandler(e) {
  e.preventDefault();
  const href = this.getAttribute("href");
  const offsetTop = document.querySelector(href).offsetTop;

  scroll({
    top: offsetTop,
    behavior: "smooth"
  });
}

提示：如果不的的scroll()方法中，我们同样可以使用了scrollTo()和scrollBy()方法。 效果应相同。

这是相关的演示：

使用scrollIntoView()方法

除了上述附加到window对象的scroll方法之外，还有适用于DOM元素的scrollIntoView()方法。 这也可以接受behavior属性并将其值设置为smooth 。

这是此实现所需的代码：

const links = document.querySelectorAll(".page-header ul a");

for (const link of links) {
  link.addEventListener("click", clickHandler);
}

function clickHandler(e) {
  e.preventDefault();
  const href = this.getAttribute("href");

  document.querySelector(href).scrollIntoView({
    behavior: "smooth"
  });
}

相关演示：

保鲜膜好吗？

原生平滑滚动很棒，但是和许多其他新CSS好东西一样，它缺乏广泛的支持 。 如果对浏览器的支持对您很重要，则可以查看Dustan Kasten开发的Smooth Scroll polyfill。

要将其包含在您的项目中，请从CDN中获取它，然后将其作为script标签插入到JavaScript代码之前。

这是我们上面提到的嵌入了polyfillJavaScript演示之一：

例如，使用此polyfill，浏览器（如Microsoft Edge 18）和iPad Mini 4等设备中的动画应能按预期工作。

结论

就是这样，伙计们！ 今天，我们介绍了一个JavaScript技巧，该技巧可以帮助我们在不使用任何外部库的情况下实现平滑滚动。

我希望您觉得本练习有用，并且可以增强您JavaScript知识。 如果您过去曾经构建过类似的东西，请在下面的评论中与我们分享！

挑战 ：在结束之前，我为您带来一个小挑战！ 您的工作是通过添加“返回页首”按钮来扩展我们JavaScript演示之一。 最终功能应类似于此演示 。 您接受挑战吗？ 如果是这样，我很高兴在下面的评论中看到您的解决方案！

与往常一样，非常感谢您的阅读！

翻译自: https://webdesign.tutsplus.com/tutorials/smooth-scrolling-vanilla-javascript--cms-35165

vanilla