返回

优雅地返回页面顶部：使用 jQuery 插件 ScrollUp

前端

在浩瀚的网络海洋中，用户体验至关重要。当访客浏览网站时，他们希望拥有流畅而便捷的体验。然而，当页面滚动时，返回顶部可能是一项繁琐且耗时的任务。

幸运的是，jQuery 插件 ScrollUp 提供了一个优雅的解决方案，帮助用户轻松返回页面顶部。该插件创建一个可自定义的移动按钮，当页面滚动到超过浏览器高度时出现。只需点击按钮，页面滚动条就会迅速移动到顶部，节省用户的时间和精力。

ScrollUp 的使用

使用 ScrollUp 非常简单：

  1. 在您的 HTML 页面中包含 jQuery 和 ScrollUp 脚本：
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.1/jquery.min.js"></script>
<script src="scrollup.min.js"></script>
  1. 初始化插件：
$(document).ready(function() {
  $.scrollUp();
});

自定义 ScrollUp

ScrollUp 提供了广泛的自定义选项，让您可以轻松调整按钮的外观和行为。您可以设置按钮的：

  • 位置
  • 样式（圆形或矩形）
  • 颜色
  • 图标
  • 动画速度

要自定义 ScrollUp，只需在初始化时传递一个对象，其中包含所需的选项：

$(document).ready(function() {
  $.scrollUp({
    scrollName: 'scrollUp', // 元素 ID
    scrollDistance: 300, // 滚动条偏移量
    scrollFrom: 'top', // 滚动起点
    scrollSpeed: 1000, // 动画速度
    easingType: 'linear', // 动画缓动类型
    animation: 'fade', // 动画类型
    animationInSpeed: 200, // 显示动画速度
    animationOutSpeed: 200, // 隐藏动画速度
    scrollText: '返回顶部', // 按钮文本
    scrollTitle: '返回顶部', // 按钮悬停提示
    scrollImg: true, // 是否使用图片
    activeOverlay: false, // 是否使用覆盖层
    zIndex: 2147483647 // 按钮 z-index
  });
});

SEO 优化

ScrollUp 插件已针对 SEO 进行了优化，其按钮不含任何文本或链接。然而，您仍然可以通过向按钮添加适当的 alt 文本来使其更易于访问。