<!DOCTYPE html>
<html>
<head>
<title>返回顶部示例</title>
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<style>
#back-to-top {
display: none;
position: fixed;
bottom: 20px;
right: 20px;
background-color: #333;
color: #fff;
padding: 10px;
cursor: pointer;
}
</style>
</head>
<body>
<h1>返回顶部示例</h1>
<h1>返回顶部示例</h1>
<h1>返回顶部示例</h1>
<h1>返回顶部示例</h1>
<h1>返回顶部示例</h1>
<h1>返回顶部示例</h1>
<h1>返回顶部示例</h1>
<h1>返回顶部示例</h1>
<h1>返回顶部示例</h1>
<h1>返回顶部示例</h1>
<h1>返回顶部示例</h1>
<h1>返回顶部示例</h1>
<h1>返回顶部示例</h1>
<h1>返回顶部示例</h1>
<h1>返回顶部示例</h1>
<h1>返回顶部示例</h1>
<h1>返回顶部示例</h1>
<h1>返回顶部示例</h1>
<h1>返回顶部示例</h1>
<h1>返回顶部示例</h1>
<h1>返回顶部示例</h1>
<h1>返回顶部示例</h1>
<h1>返回顶部示例</h1>
<p>这是一个示例页面。</p>
<!-- 显示“返回顶部”按钮 -->
<a id="back-to-top">返回顶部</a>
<script>
$(document).ready(function() {
// 当页面滚动时显示或隐藏“返回顶部”按钮
$(window).scroll(function() {
if ($(this).scrollTop() > 100) {
$('#back-to-top').fadeIn();
} else {
$('#back-to-top').fadeOut();
}
});
// 点击“返回顶部”按钮时回到页面顶部
$('#back-to-top').click(function() {
$('html, body').animate({scrollTop : 0}, 800);
return false;
});
});
</script>
</body>
</html>
