当前位置：首页 > wzjs >正文

楚州网站开发广告大全

wzjs 2025/8/27 14:47:53

楚州网站开发,广告大全,响应式网站一般做几个版本,大型网站开发 java后端JavaScript 实现页面底部回到顶部功能以下是几种实现页面底部回到顶部功能的方法： 方法一：基础实现（点击按钮滚动到顶部） <!DOCTYPE html> <html> <head><style>#backToTop {position: fixed;bottom:…

JavaScript 实现页面底部回到顶部功能

以下是几种实现页面底部回到顶部功能的方法：

方法一：基础实现（点击按钮滚动到顶部）

<!DOCTYPE html>
<html>
<head><style>#backToTop {position: fixed;bottom: 20px;right: 20px;display: none;width: 50px;height: 50px;background-color: #333;color: white;text-align: center;line-height: 50px;border-radius: 50%;cursor: pointer;}</style>
</head>
<body><!-- 页面内容 --><div style="height: 2000px;">滚动测试内容...</div><!-- 回到顶部按钮 --><div id="backToTop">↑</div><script>const backToTopBtn = document.getElementById('backToTop');// 监听滚动事件window.addEventListener('scroll', function() {if (window.pageYOffset > 300) { // 滚动超过300px显示按钮backToTopBtn.style.display = 'block';} else {backToTopBtn.style.display = 'none';}});// 点击回到顶部backToTopBtn.addEventListener('click', function() {window.scrollTo({top: 0,behavior: 'smooth' // 平滑滚动});});</script>
</body>
</html>

方法二：更流畅的动画效果

// 使用requestAnimationFrame实现更流畅的滚动
function scrollToTop(scrollDuration) {const scrollStep = -window.scrollY / (scrollDuration / 15);const scrollInterval = setInterval(function() {if (window.scrollY !== 0) {window.scrollBy(0, scrollStep);} else {clearInterval(scrollInterval);}}, 15);
}// 使用示例
document.getElementById('backToTop').addEventListener('click', function() {scrollToTop(500); // 500ms内滚动到顶部
});

方法三：同时支持底部和顶部

// 同时支持滚动到底部和回到顶部
function toggleScrollButtons() {const backToTopBtn = document.getElementById('backToTop');const scrollToBottomBtn = document.getElementById('scrollToBottom');if (window.pageYOffset > 300) {backToTopBtn.style.display = 'block';scrollToBottomBtn.style.display = 'none';} else if (window.innerHeight + window.pageYOffset >= document.body.offsetHeight - 100) {backToTopBtn.style.display = 'none';scrollToBottomBtn.style.display = 'block';} else {backToTopBtn.style.display = 'none';scrollToBottomBtn.style.display = 'none';}
}window.addEventListener('scroll', toggleScrollButtons);// 滚动到底部按钮
document.getElementById('scrollToBottom').addEventListener('click', function() {window.scrollTo({top: document.body.scrollHeight,behavior: 'smooth'});
});

方法四：使用CSS自定义属性控制

:root {--back-to-top-size: 50px;--back-to-top-color: #333;--back-to-top-hover-color: #555;
}#backToTop {position: fixed;bottom: 20px;right: 20px;display: none;width: var(--back-to-top-size);height: var(--back-to-top-size);background-color: var(--back-to-top-color);color: white;text-align: center;line-height: var(--back-to-top-size);border-radius: 50%;cursor: pointer;transition: background-color 0.3s;
}#backToTop:hover {background-color: var(--back-to-top-hover-color);
}