如何给网页增加滚动到顶部的功能
若想为网页添加滚动到顶部的功能，可按以下步骤操作：
1. 创建滚动按钮
先在 HTML 里添加一个用于触发滚动的按钮，代码如下：
html
预览
<button id="scrollToTopBtn" title="返回顶部">↑</button>
2. 设计按钮样式
接着使用 CSS 为这个按钮设计样式，让它固定在页面右下角，示例样式如下：
css
#scrollToTopBtn {position: fixed;bottom: 20px;right: 20px;background-color: #007BFF;color: white;border: none;border-radius: 50%;width: 40px;height: 40px;font-size: 20px;cursor: pointer;display: none; /* 默认隐藏按钮 */z-index: 999;
}#scrollToTopBtn:hover {background-color: #0056b3;
}
3. 编写 JavaScript 逻辑
最后用 JavaScript 实现按钮的显示、隐藏以及滚动功能：
javascript
document.addEventListener('DOMContentLoaded', function() {const scrollToTopBtn = document.getElementById('scrollToTopBtn');// 监听滚动事件window.addEventListener('scroll', function() {if (window.scrollY > 300) { // 当页面滚动超过300像素时显示按钮scrollToTopBtn.style.display = 'block';} else {scrollToTopBtn.style.display = 'none';}});// 点击按钮时平滑滚动到顶部scrollToTopBtn.addEventListener('click', function() {window.scrollTo({top: 0,behavior: 'smooth' // 平滑滚动效果});});
});
完整示例
下面是一个整合了上述代码的完整示例：
html
预览
<!DOCTYPE html>
<html lang="zh-CN">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>滚动到顶部示例</title><style>body {height: 2000px; /* 增加页面高度以便测试滚动 */margin: 0;padding: 20px;font-family: Arial, sans-serif;}#scrollToTopBtn {position: fixed;bottom: 20px;right: 20px;background-color: #007BFF;color: white;border: none;border-radius: 50%;width: 40px;height: 40px;font-size: 20px;cursor: pointer;display: none;z-index: 999;}#scrollToTopBtn:hover {background-color: #0056b3;}</style>
</head>
<body><h1>滚动到顶部示例</h1><p>滚动页面查看效果...</p><button id="scrollToTopBtn" title="返回顶部">↑</button><script>document.addEventListener('DOMContentLoaded', function() {const scrollToTopBtn = document.getElementById('scrollToTopBtn');window.addEventListener('scroll', function() {if (window.scrollY > 300) {scrollToTopBtn.style.display = 'block';} else {scrollToTopBtn.style.display = 'none';}});scrollToTopBtn.addEventListener('click', function() {window.scrollTo({top: 0,behavior: 'smooth'});});});</script>
</body>
</html>Kindergarten sight words - Kindergarten Sight Words 这个网站就用了这个技术，滚动到页面顶部