本章节为大家介绍如何通过 JS/CSS 实现网页返回顶部效果。

CSS 按钮样式：

#myBtn {display: none; /* 默认隐藏 */position: fixed;bottom: 20px;right: 30px;z-index: 99;border: none;outline: none;background-color: red; /* 设置背景颜色 你可以设置自己想要的颜色或图片 */color: white; /* 文本颜色 */cursor: pointer;padding: 15px;border-radius: 10px; /* 圆角 */}#myBtn:hover {background-color: #555;}

JS 代码：

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

尝试一下 »