scroll_to_top.js
· 1.1 KiB · JavaScript
Raw
// 创建按钮
const backToTopBtn = document.createElement('button');
backToTopBtn.innerText = '↑ Top';
backToTopBtn.style.position = 'fixed';
backToTopBtn.style.bottom = '20px';
backToTopBtn.style.right = '20px';
backToTopBtn.style.padding = '10px 15px';
backToTopBtn.style.backgroundColor = '#007bff';
backToTopBtn.style.color = 'white';
backToTopBtn.style.border = 'none';
backToTopBtn.style.borderRadius = '5px';
backToTopBtn.style.cursor = 'pointer';
backToTopBtn.style.boxShadow = '0 4px 6px rgba(0, 0, 0, 0.1)';
backToTopBtn.style.zIndex = '1000';
backToTopBtn.style.display = 'none'; // 默认隐藏
// 按钮平滑滚动到顶部
backToTopBtn.addEventListener('click', () => {
window.scrollTo({ top: 0, behavior: 'smooth' });
});
// 添加按钮到页面
document.body.appendChild(backToTopBtn);
// 监听滚动事件，显示/隐藏按钮
window.addEventListener('scroll', () => {
if (window.scrollY > 300) { // 当滚动超过 300px 时显示按钮
backToTopBtn.style.display = 'block';
} else {
backToTopBtn.style.display = 'none';
}
});
| 1 | // 创建按钮 |
| 2 | const backToTopBtn = document.createElement('button'); |
| 3 | backToTopBtn.innerText = '↑ Top'; |
| 4 | backToTopBtn.style.position = 'fixed'; |
| 5 | backToTopBtn.style.bottom = '20px'; |
| 6 | backToTopBtn.style.right = '20px'; |
| 7 | backToTopBtn.style.padding = '10px 15px'; |
| 8 | backToTopBtn.style.backgroundColor = '#007bff'; |
| 9 | backToTopBtn.style.color = 'white'; |
| 10 | backToTopBtn.style.border = 'none'; |
| 11 | backToTopBtn.style.borderRadius = '5px'; |
| 12 | backToTopBtn.style.cursor = 'pointer'; |
| 13 | backToTopBtn.style.boxShadow = '0 4px 6px rgba(0, 0, 0, 0.1)'; |
| 14 | backToTopBtn.style.zIndex = '1000'; |
| 15 | backToTopBtn.style.display = 'none'; // 默认隐藏 |
| 16 | |
| 17 | // 按钮平滑滚动到顶部 |
| 18 | backToTopBtn.addEventListener('click', () => { |
| 19 | window.scrollTo({ top: 0, behavior: 'smooth' }); |
| 20 | }); |
| 21 | |
| 22 | // 添加按钮到页面 |
| 23 | document.body.appendChild(backToTopBtn); |
| 24 | |
| 25 | // 监听滚动事件，显示/隐藏按钮 |
| 26 | window.addEventListener('scroll', () => { |
| 27 | if (window.scrollY > 300) { // 当滚动超过 300px 时显示按钮 |
| 28 | backToTopBtn.style.display = 'block'; |
| 29 | } else { |
| 30 | backToTopBtn.style.display = 'none'; |
| 31 | } |
| 32 | }); |
| 33 |