如何向您的网站添加粘性返回顶部按钮

已发表: 2023-02-12

我们都去过那里。 您找到了一份很棒的在线指南，一直滚动到底部，然后想，“哇，我很想看看这个网站还能提供什么！”

但是你必须滚动。

全部。

这。

方式。

到。

这。

顶部。

然后你想…… “嗯，没关系。” 并关闭页面。

作为网页设计师，这几乎是您最不希望别人在访问您正在构建的网站时做的事情。 幸运的是，现代网页设计最佳实践为我们提供了解决这一常见用户体验问题的方法：粘性返回顶部按钮。

什么是粘性返回顶部按钮？

粘性返回顶部按钮也称为滚动到顶部按钮或转到顶部图像，是一个有用的导航元素，可帮助用户返回到他们正在查看的网页的顶部。 一个常见的 UI 模式是将此按钮放置在屏幕的右下角，通过固定位置使其“粘”起来，以便在用户向下滚动页面时始终可以访问它。

添加返回顶部按钮之前要考虑的事项

与任何流行的设计趋势一样，我鼓励您在网站上实施它之前先退一步问问自己：如果我要构建它，我需要遵循哪些返回顶部按钮指南？

在构建滚动到顶部按钮之前，需要回答以下几个问题：

  • 它会放在哪里？
  • 它应该有多大（或多小）？
  • 您应该遵循哪些设计模式才能保持品牌形象？ （想想颜色、字体、图标等）
  • 它是否有覆盖重要网站内容的风险，例如边栏中的信息？
  • 在移动设备上会发生什么？ 会有反应吗？
  • 你真的需要它吗？*

*注意：您可以提出这样的论点，即今天的用户习惯于在页面上向下滚动（然后向上滚动！），这将消除对返回顶部按钮的“需求”。 我的建议：测试一下！ 添加点击时的 Google Analytics（分析）事件或使用 Hotjar 等热图工具来查看您的网站访问者如何与页面互动。

要遵循的最佳“最佳实践”是基于您自己的站点和用户的数据！

如何将粘性返回顶部按钮添加到您的 WordPress 网站

在本教程中，我将向您展示如何在布局中添加我们在此处使用的返回顶部按钮！ 唯一的区别是我们将我们的放置在屏幕顶部的粘性标题中，而不是右下角。 （但别担心，这是同一个概念！）

专业提示：虽然本教程不是太高级，但我仍然建议您在暂存站点或本地环境中试用它，这样您的实时站点绝对没有风险。 如果您需要快速设置一个，请查看 Local，这是一款非常易于使用的免费本地 WordPress 应用程序。

或者，查看添加粘性返回顶部按钮的视频教程！

请参阅 CodePen 上 Josh Lawler (@joshuamasen) 的 Pen ES6 滚动到顶部按钮。

对于这个粘性返回顶部按钮教程，我们将使用三种语言：

  • 用于创建按钮的标记的 HTML
  • CSS 来设置按钮的样式并使其与您的品牌相匹配
  • JavaScript 使其“​​工作”并定义按钮的行为

在 HTML 中，您会发现以下几行：

 <a class="顶部链接隐藏" href="">
  <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 12 6"><path d="M12 6H0l6-6z"/></svg>
  <span class="screen-reader-text">返回顶部</span>
</a>

这将成为您的粘性返回顶部按钮！ 您可以看到我们添加了一个名为.top-link的 CSS 类，并且正在使用一些简单的 JavaScript 来“让它工作”。 我们还为按钮使用了内联 SVG。

除了 SVG，您还可以使用图像文件或字体图标来创建按钮。 但是，我们更喜欢 SVG 方法，因为：

  1. 它不会像光栅图像那样在不同的屏幕尺寸下像素化。
  2. 浏览器普遍支持 SVG。 （耶，用户体验！）
  3. 使用 CSS 设置样式很容易，因此您可以非常轻松地更改它的所有内容。
  4. 它只需要一行代码，使其轻量级并更好地提高站点性能。

您将在 HTML 中找到的最后一个真正重要的部分是这一行：

 <span class="screen-reader-text">返回顶部</span>

这对于使用屏幕阅读器操作的用户来说至关重要，并且会提高您的 WordPress 网站的可访问性。 （把它想象成图像的 alt 标签，但对于你的滚动到顶部按钮！）

现在让我们更多地讨论 CSS 类.top-link 。 我们正在使用它来实际设计按钮的样式，您可以在其中定义质量，例如按钮的大小、按钮周围的填充量、颜色等。

 .top-link {
  过渡：所有 0.25 秒的缓入缓出；
  位置：固定；
  底部：0；
  右：0；
  显示：内联柔性；
  
 游标：指针；
 对齐项目：居中；
 证明内容：居中；
 保证金：0 3em 3em 0；
 边界半径：50%；
 填充：.25em；
 宽度：80px；
 高度：80px；
 背景色：#F8F8F8；

注意：我们正在使用 Sass（一种样式表语言）来更快地编写我们的 CSS。 在此处了解有关此预处理器的更多信息。

此片段中的几个重要部分： transition: all .25s ease-in-out ; 控制按钮在屏幕上出现或消失的“速度”，以及position: fixed ； 是什么让按钮“粘”到你想要的位置。

接下来，您将看到.show和.hide的规则。 我们将使用 JavaScript 在这些类之间切换，以便告诉浏览器按钮何时应该（或不应该）出现在页面上。

 。展示 {
    能见度：可见；
    不透明度：1；
  }
  
  。隐藏 {
    可见性：隐藏；
    不透明度：0；
  }

在我们进入 JavaScript 之前，我们将再添加几行到 CSS。

 svg {
 填写：#000；
 宽度：24px；
 高度：12px；
}
&:悬停{
 背景色：#E8E8E8；
 	svg {
	 填充：#000000；
	}
}

这些类将样式化箭头本身的 SVG 图像，并告诉浏览器当用户将鼠标悬停在按钮上时如何显示按钮。

最后，我们将添加一些 CSS 来为屏幕阅读器隐藏显示“返回顶部”的文本。

 // 仅供屏幕阅读器使用的文本。
.screen-reader-text {
	位置：绝对；
	剪辑路径：插图（50%）；
	保证金：-1px；
	边界：0；
	填充：0；
	宽度：1px；
	高度：1px；
	溢出：隐藏；
	自动换行：正常！重要；
	剪辑：矩形（1px，1px，1px，1px）；
	＆：重点 {
		显示：块；
		顶部：5px；
		左：5px；
		z-索引：100000； // 在 WP 工具栏上方
		剪辑路径：无；
		背景色：#eee；
		填充：15px 23px 14px；
		宽度：自动；
		高度：自动；
		文字修饰：无；
		行高：正常；
		颜色：#444；
		字体大小：1em；
		剪辑：自动！重要；
	}
}

现在开始使用 JavaScript！ 我们将在不加载 jQuery 的情况下执行此操作，这将有助于保持代码的轻量级和快速加载。

第一个变量将帮助浏览器找到按钮。

 // 为我们的按钮元素设置一个变量。
const scrollToTopButton = document.getElementById('js-top');

接下来，我们将创建一个函数，如果用户滚动超出初始窗口的高度，则显示滚动到顶部按钮。

 const scrollFunc = () => {
  // 获取当前滚动值
  让 y = window.scrollY;
  
  // 如果滚动值大于窗口高度，让我们给滚动到顶部按钮添加一个类来显示它！
  如果（y > 0）{
    scrollToTopButton.className = "顶部链接显示";
  } 别的 {
    scrollToTopButton.className = "顶部链接隐藏";
  }
};

我们还将添加一个事件侦听器，它将在用户滚动时进行监视（因此我们知道他们在页面上的位置）。

 window.addEventListener("滚动", scrollFunc);

快完成了！ 接下来，我们需要定义使按钮真正将用户带回到页面顶部的功能。 为此，我们将为距页面顶部的像素数创建一个变量。 如果该数字大于 0，该函数会将其设置回 0，将我们带到顶部！

我们还将在此处添加一点动画，因此跳跃不会太突然。

 const scrollToTop = () => {
  // 让我们为距文档顶部的像素数设置一个变量。
  const c = document.documentElement.scrollTop || 文档.body.scrollTop;
  
  // 如果该数字大于 0，我们将滚动回 0，即文档的顶部。
  // 我们还将使用 requestAnimationFrame 为滚动设置动画：
  // https://developer.mozilla.org/en-US/docs/Web/API/window/requestAnimationFrame
  如果（c > 0）{
    window.requestAnimationFrame(scrollToTop);
    // ScrollTo 采用 x 和 y 坐标。
    // 增加“10”值以获得更平滑/更慢的滚动！
    window.scrollTo(0, c - c / 10);
  }
};

最后但同样重要的是，我们只需要告诉页面在有人单击我们的粘性返回顶部按钮时运行该功能。

 // 当按钮被点击时，运行我们上面的 ScrolltoTop 函数！
scrollToTopButton.onclick = function(e) {
  e.preventDefault();
  滚动到顶部（）;
}

就是这样！ 您现在将在您的 WordPress 网站上拥有一个功能齐全且可自定义的粘性返回顶部按钮。