博客

使用JavaScript或jQuery滚动到页面顶部

  • Post category:jquery

下面是详细讲解如何使用 JavaScript 或 jQuery 滚动到页面顶部的完整攻略：

1. 使用 JavaScript 滚动到页面顶部

要使用 JavaScript 滚动到页面顶部，可以先定义一个函数，该函数的作用是让当前窗口滚动到页面顶部。我们可以使用 window.scrollTo(x, y) 函数实现此功能。其中，x 和 y 表示滚动到的坐标点，对于滚动到顶部，我们只需要将 x 设置为 0，y 设置为 0 即可。

function scrollToTop() {
  window.scrollTo(0, 0);
}

接下来，我们需要绑定一个事件，当点击页面上的某个按钮时，就会触发该事件从而执行 scrollToTop() 函数。绑定事件的方法有很多种，这里我们以 addEventListener 为例：

// 获取按钮元素
const toTopBtn = document.querySelector('#to-top-btn');

// 给按钮元素绑定点击事件，当点击按钮时，就会滚动到页面顶部
toTopBtn.addEventListener('click', scrollToTop);

这样，我们就完成了使用 JavaScript 滚动到页面顶部的操作。

2. 使用 jQuery 滚动到页面顶部

要使用 jQuery 滚动到页面顶部，可以先定义一个函数，该函数的作用与上面的 scrollToTop 函数相同，让当前窗口滚动到页面顶部。

function scrollToTop() {
  $('html,body').animate({scrollTop: 0}, 500);
}

其中，$('html,body') 表示同时选中 html 和 body 元素，因为在一些浏览器中滚动页面时有些需要对 html 元素进行操作，有些则需要对 body 元素进行操作，所以使用 html,body 可以兼容多种浏览器。

然后，我们需要绑定一个事件，当点击页面上的某个按钮时，就会触发该事件从而执行 scrollToTop() 函数。绑定事件的方法也有很多种，这里我们以 on 方法为例：

// 获取按钮元素
const toTopBtn = $('#to-top-btn');

// 给按钮元素绑定点击事件，当点击按钮时，就会滚动到页面顶部
toTopBtn.on('click', scrollToTop);

这样，我们就完成了使用 jQuery 滚动到页面顶部的操作。

3. 示例说明

以下是两个示例的 HTML 代码：

<!-- 示例一：使用 JavaScript 滚动到页面顶部 -->
<button id="to-top-btn">回到顶部</button>

<!-- 示例二：使用 jQuery 滚动到页面顶部 -->
<button id="to-top-btn">回到顶部</button>

我们需要将这些代码放到一个 HTML 文件里，并将 JavaScript 或 jQuery 代码复制到 <script> 标签中并引入到 HTML 页面即可。点击按钮后，页面会平滑地滚动到页面顶部。

Tags: