原生 JavaScript 返回顶部

我们来创建一个JavaScript自动返回顶部的功能。
我们将创建一个按钮，位于页面右下角，点击该按钮后，页面将自动返回顶部。

HTML结构

<button onclick="scrollToTop()" class="scroll-top">☝️</button>

这就是我们需要的全部内容，我们将CSS在其中定义一些内容并构建 scrollToTop 函数JavaScript。

CSS 设置

.scroll-top {
  position: fixed;
  bottom: 25px;
  right: 25px;
  z-index: 99;
  outline: none;
  background-color: #efefef;
  border: 1px solid #333;
  cursor: pointer;
  padding: 15px;
  border-radius: 4px;
}

滚动按钮会添加一个箭头position: fixed，并且我们将其向右下方偏移。
然后我们进行一些常规样式设置，使其看起来像一个方框。

JavaScript 返回顶部

function scrollToTop() {
  window.scroll({top: 0, left: 0, behavior: 'smooth'});
}

值得注意的是，实现这个功能的方法有很多种。
我们可以像这篇文章里那样使用scrollIntoView。但今天，我们使用的是普通的滚动功能。

我们可以定义需要滚动到的位置和滚动行为。

另一种滚动方式是scrollTo：

window.scrollTo(0, 0);

在 Codepen 上查看实际效果。

请在CodePen上查看Chris Bongers ( @rebelchris )的Pen Vanilla JavaScript Scroll to Top。

浏览器支持

遗憾的是，滚动 API 尚未完全支持！

感谢阅读，让我们保持联系！

感谢您阅读我的博客。欢迎订阅我的电子邮件简讯，也可以在Facebook或Twitter上关注我。