滚动到顶部 jQuery - JavaScript

在网页中，经常需要提供一种方便快捷的方式，以让用户迅速回到网页的顶部。本文将介绍如何通过使用 jQuery 和 JavaScript 来实现这一功能。

步骤

首先，我们需要在页面中添加一个按钮，以便用户点击时执行滚动到顶部的功能。可以使用以下 HTML 代码：

<button id="myBtn">返回顶部</button>

接下来，我们需要添加一些 CSS 代码以定义按钮的样式。以下是一个样板：

#myBtn {
  display: none;
  position: fixed;
  bottom: 20px;
  right: 30px;
  z-index: 99;
  font-size: 18px;
  border: none;
  outline: none;
  background-color: red;
  color: white;
  cursor: pointer;
  padding: 15px;
  border-radius: 4px;
}

#myBtn:hover {
  background-color: #555;
}

这是一个基本的样式表，你可以随意修改它以匹配你的网页。

接下来，我们需要编写一个 JavaScript 函数，以检测用户是否正在滚动页面，并在必要的情况下显示或隐藏“返回顶部”按钮。以下是一个实现此功能的简单示例：

$(document).ready(function() {
  // 当用户滚动页面时触发
  $(window).scroll(function() {
    // 如果用户滚动到超过 20 像素，则显示“返回顶部”按钮
    if ($(this).scrollTop() > 20) {
      $('#myBtn').fadeIn();
    } else {
      $('#myBtn').fadeOut();
    }
  });

  // 当用户点击“返回顶部”按钮时触发
  $('#myBtn').click(function() {
    // 使用动画效果滚动到页面顶部
    $('html, body').animate({scrollTop : 0},800);
  });
});

以上代码监听了用户的滚动事件，当用户向下滚动超过 20 像素时显示“返回顶部”按钮，并在用户单击按钮时使用动画效果滚动到页面顶部。

总结

使用 jQuery 和 JavaScript 可以很容易地实现一个滚动到顶部的功能。通过编写一些简单的代码，加上一些样式修饰，你可以给用户一个方便快捷的回到顶部的方式，充分提升用户体验。