前端H5+CSS3回到顶部功能
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>H5+CSS3 回到顶部示例</title>
<style>
.back-to-top {
position: fixed;
bottom: 20px;
right: 20px;
display: none;
cursor: pointer;
z-index: 9999;
}
.back-to-top:hover {
opacity: 0.8;
}
</style>
</head>
<body>
<!-- 页面内容 -->
<div class="back-to-top">回到顶部</div>
<script>
// 获取页面中的“回到顶部”按钮
const btn = document.querySelector('.back-to-top');
// 监听滚动事件
window.addEventListener('scroll', function() {
// 当页面向下滚动超过500px时显示按钮，否则隐藏按钮
if (window.pageYOffset > 500) {
btn.style.display = 'block';
} else {
btn.style.display = 'none';
}
});
// 点击按钮回到顶部的功能
btn.addEventListener('click', function() {
// 平滑滚动到页面顶部
window.scrollTo({
top: 0,
behavior: 'smooth'
});
});
</script>
</body>
</html>这段代码实现了一个简单的回到顶部按钮，当页面向下滚动超过500px时显示这个按钮，点击按钮会平滑滚动至页面顶部。CSS部分定义了按钮的样式和位置，JavaScript部分则监听了滚动事件并处理了按钮的显示和点击事件。
评论已关闭