[导读]：本章节为大家介绍如何通过 JS/CSS 实现网页返回顶部效果。 CSS 按钮样式： #myBtn { display: none ; /* 默认隐藏 */ position: fixed ; bottom: 20 px ; right: 30 px ; z-index: 99 ; border: none ; outline: n...
本章节为大家介绍如何通过 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; }尝试一下 »
本文来自投稿，不代表微盟圈立场，如若转载，请注明出处：https://www.vm7.com/a/ziyuan/111883.html
