📅 最后修改于: 2023-12-03 15:38:04.615000 🧑 作者: Mango
在网页开发中，经常需要进行平滑滚动操作。而有时我们还需要设置滚动停止的位置，比如滚动到网页的顶部。本文将介绍如何使用 jQuery 实现平滑滚动并停止在顶部的特定位置。
首先，我们需要准备一个 HTML 页面。这个页面包含内容较长的一段文章，让页面出现垂直滚动条。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Smooth Scroll to Top using jQuery</title>
<style>
body {
margin: 0;
padding: 0;
font-family: Arial, sans-serif;
font-size: 16px;
}
.container {
max-width: 800px;
margin: 0 auto;
padding: 20px;
}
h1 {
text-align: center;
}
</style>
</head>
<body>
<div class="container">
<h1>Smooth Scroll to Top using jQuery</h1>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Reprehenderit perferendis non quae quis modi odit nulla, a commodi nam!</p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Reprehenderit perferendis non quae quis modi odit nulla, a commodi nam!</p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Reprehenderit perferendis non quae quis modi odit nulla, a commodi nam!</p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Reprehenderit perferendis non quae quis modi odit nulla, a commodi nam!</p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Reprehenderit perferendis non quae quis modi odit nulla, a commodi nam!</p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Reprehenderit perferendis non quae quis modi odit nulla, a commodi nam!</p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Reprehenderit perferendis non quae quis modi odit nulla, a commodi nam!</p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Reprehenderit perferendis non quae quis modi odit nulla, a commodi nam!</p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Reprehenderit perferendis non quae quis modi odit nulla, a commodi nam!</p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Reprehenderit perferendis non quae quis modi odit nulla, a commodi nam!</p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Reprehenderit perferendis non quae quis modi odit nulla, a commodi nam!</p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Reprehenderit perferendis non quae quis modi odit nulla, a commodi nam!</p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Reprehenderit perferendis non quae quis modi odit nulla, a commodi nam!</p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Reprehenderit perferendis non quae quis modi odit nulla, a commodi nam!</p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Reprehenderit perferendis non quae quis modi odit nulla, a commodi nam!</p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Reprehenderit perferendis non quae quis modi odit nulla, a commodi nam!</p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Reprehenderit perferendis non quae quis modi odit nulla, a commodi nam!</p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Reprehenderit perferendis non quae quis modi odit nulla, a commodi nam!</p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Reprehenderit perferendis non quae quis modi odit nulla, a commodi nam!</p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Reprehenderit perferendis non quae quis modi odit nulla, a commodi nam!</p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Reprehenderit perferendis non quae quis modi odit nulla, a commodi nam!</p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Reprehenderit perferendis non quae quis modi odit nulla, a commodi nam!</p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Reprehenderit perferendis non quae quis modi odit nulla, a commodi nam!</p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Reprehenderit perferendis non quae quis modi odit nulla, a commodi nam!</p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Reprehenderit perferendis non quae quis modi odit nulla, a commodi nam!</p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Reprehenderit perferendis non quae quis modi odit nulla, a commodi nam!</p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Reprehenderit perferendis non quae quis modi odit nulla, a commodi nam!</p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Reprehenderit perferendis non quae quis modi odit nulla, a commodi nam!</p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Reprehenderit perferendis non quae quis modi odit nulla, a commodi nam!</p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Reprehenderit perferendis non quae quis modi odit nulla, a commodi nam!</p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Reprehenderit perferendis non quae quis modi odit nulla, a commodi nam!</p>
</div>
</body>
</html>
为了美化页面，我们还需要添加一些 CSS 样式，这些样式主要是为了改变页面的外观，比如字体、宽度等。
接下来，我们需要添加 jQuery 库。可以从官网上下载最新版本的 jQuery，也可以直接使用在线版本：
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
最后，我们需要编写 Javascript 代码。首先，我们需要检测网页滚动，当滚动超过 100 像素时，显示“返回顶部”按钮。当点击该按钮时，实现页面平滑滚动，并停止在顶部位置。
$(window).scroll(function () {
if ($(this).scrollTop() > 100) {
$('#scroll-to-top').fadeIn();
} else {
$('#scroll-to-top').fadeOut();
}
});
$('#scroll-to-top').click(function () {
$('html, body').animate({
scrollTop: 0
}, 800);
return false;
});
以上代码中，$(window).scroll(function () {}) 监听网页滚动事件，.scrollTop() 获取当前滚动位置，fadeIn() 和 fadeOut() 分别显示和隐藏“返回顶部”按钮；
$('#scroll-to-top').click(function () {}) 用于监听“返回顶部”按钮的点击事件，$('html, body').animate() 实现页面平滑滚动，其中 scrollTop: 0 表示滚动到顶部位置。
最后，我们需要在 HTML 中添加“返回顶部”按钮：
<div id="scroll-to-top">
<a href="#"><i class="fa fa-angle-double-up" aria-hidden="true"></i></a>
</div>
该按钮包括两部分，一个是 ID 为 scroll-to-top 的 div，另一个是包含一个带有“向上箭头”的 a 标签。在 CSS 中使用了 Font Awesome 图标库，所以代码中出现了类似 fa fa-angle-double-up 的语法。
通过以上几个步骤，我们就可以实现一个平滑滚动并停止在顶部位置的效果。该效果可以提高用户体验，让页面更加美观且易用。