前端JS返回顶部

css样式：

#btnTop{ position: fixed; bottom: 2%; right: 2%; background: white; width: 45px; height: 50px; text-align: center; line-height: 50px; font-size: 35px; border: 1px solid darkgray; display: none; } #btnTop:HOVER { border: 1px solid lightskyblue; background: gainsboro; cursor: pointer; color:white; }

标签：

<span id="btnTop" onclick="returnTop()" title="返回顶部">∧</span>

JS：

// 当网页向下滑动 20px 出现"返回顶部" 按钮 window.onscroll = function() { scrollFunction() }; function scrollFunction() { if(document.body.scrollTop > 20) { document.getElementById("btnTop").style.display = "block"; } else { document.getElementById("btnTop").style.display = "none"; } } // 点击按钮，返回顶部 function returnTop() { document.body.scrollTop = 0; document.documentElement.scrollTop = 0; }