如何使用 jQuery/JavaScript 滚动到页面顶部
答案：使用 scrollTop 属性
您可以结合使用 jQuery animate() 方法和 scrollTop 属性，通过动画平滑地滚动到网页顶部。
让我们试试下面的例子来了解它的基本工作原理：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>jQuery scrollTop Animation</title>
<style>
.scroll-top{
position: fixed;
bottom: 10px;
right: 10px;
z-index: 99;
}
</style>
<script src="https://code.jquery.com/jquery-3.5.1.min.js"></script>
<script>
$(document).ready(function(){
$(".scroll-top").click(function() {
$("html, body").animate({
scrollTop: 0
}, "slow");
return false;
});
});
</script>
</head>
<body>
<button type="button" class="scroll-top">Go to Top</button>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit...</p>
</body>
</html>但是，如果您只是想滚动到页面顶部而不需要任何动画或 jQuery，您可以使用原生 JavaScript window.scrollTo(xcoord, ycoord) 方法，如下所示：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>JavaScript Scroll to Top</title>
<style>
.scroll-top{
position: fixed;
bottom: 10px;
right: 10px;
z-index: 99;
}
</style>
<script>
function goToTop(){
window.scrollTo(0, 0);
}
</script>
</head>
<body>
<button type="button" class="scroll-top" onclick="goToTop();">Go to Top</button>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit...</p>
</body>
</html>你也可以使用书签锚点来做同样的事情，比如 <a href="#top">转到顶部</a>。 但是，它会在页面的 URL 中添加字符串 #top。
FAQ 相关问题解答
以下是与此主题相关的更多常见问题解答：
Advertisements