本文详细介绍如何使用 JavaScript、HTML 和 CSS 实现一个炫酷的返回顶部按钮。通过监听 window.onscroll 事件判断滚动位置，控制按钮显示与隐藏，并结合 scrollBy 与定时器实现平滑滚动效果。包含完整的 HTML 结构、CSS 样式定位及 JS 核心逻辑，适合前端初学者参考学习。
返回顶部按钮功能概述
实现一个视觉效果良好的返回顶部按钮，能够提升用户浏览长页面的体验。
JavaScript 核心实现逻辑
JavaScript 核心逻辑负责监听页面滚动行为，判断当前滚动距离，并控制返回顶部按钮的显示与隐藏。同时，通过定时器与 scrollBy 方法实现平滑向上滚动的动画效果。
window.onscroll = function(){
var t = document.documentElement.scrollTop || document.body.scrollTop;
var top_div = document.getElementById( "go" );
if( t >= 300 ) {
top_div.style.display = "block";
} else {
top_div.style.display = "none";
}
}
var ptt=20;
function pageScroll() {
document.getElementById('flypig').style.display='block';
window.scrollBy(0,-10); //每次上升10px
if(document.body.scrollTop==0) {
document.getElementById('flypig').style.marginBottom=ptt+'px';
ptt=ptt+10;
}
scrolldelay = setTimeout('pageScroll()',2); //2毫秒重复执行一次
if(ptt>=1000){
ptt=0;
document.getElementById('flypig').style.marginBottom=20+'px';
document.getElementById('flypig').style.display='none';
clearTimeout(scrolldelay);
}
//pageScroll ends
}
HTML 与 CSS 结构布局
HTML 结构用于定义返回顶部按钮的元素，包括一个用于触发平滑滚动的图标或文字，以及一个静态显示的“返回顶部”链接。CSS 样式负责固定按钮位置，通常位于页面右下角或右侧中部，并初始隐藏，仅在满足条件时显示。
<!DOCTYPE html>
<html>
<head>
<title>返回顶部按钮的实现</title>
<meta charset="utf-8" />
<style>
body{
margin:0px;
}
#flypig{
display: none;
float: left;
position: fixed;
bottom: 20px;
margin-left: 75%;
cursor: pointer;
margin-bottom: 20px;
}
#go{
display: block;
float: left;
position: fixed;
bottom: 10px;
margin-left: 75%;
cursor: pointer;
}
</style>
<script>
window.onscroll = function(){
var t = document.documentElement.scrollTop || document.body.scrollTop;
var top_div = document.getElementById( "go" );
if( t >= 300 ) {
top_div.style.display = "block";
} else {
top_div.style.display = "none";
}
}
var ptt=20;
function pageScroll() {
document.getElementById('flypig').style.display='block';
window.scrollBy(0,-10); //每次上升10px
if(document.body.scrollTop==0) {
document.getElementById('flypig').style.marginBottom=ptt+'px';
ptt=ptt+10;
}
scrolldelay = setTimeout('pageScroll()',2); //2毫秒重复执行一次
if(ptt>=1000){
ptt=0;
document.getElementById('flypig').style.marginBottom=20+'px';
document.getElementById('flypig').style.display='none';
clearTimeout(scrolldelay);
}
//pageScroll ends
}
</script>
</head>
<body>
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<h1 style="text-align:center;">请往下滑</h1>
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br /><br />
<br />
<br />
<br />
<br /><br />
<br />
<br />
<br />
<br /><br />
<br />
<br />
<br />
<br /><br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br /><!--让你的页面足够的长-->
<div style="display: none; float: left; position: fixed; margin-left: 50%; cursor: pointer; margin-bottom: 20px;" id="flypig">
<img src="/wp-content/themes/Jakesoft/images/flypig.gif"> </div>
<div style="display: none; float: left; position: fixed; bottom: 10px; margin-left: 50%; cursor: pointer;" id="go" onclick="pageScroll()">返回顶部</div></html>
以上所述就是本文的全部内容了，希望大家能够喜欢。