JavaScript 返回顶部实例（ JNI 入门教程）

技术交流
2024-10-26 01:03:01

本章节为大家介绍如何通过 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;}尝试一下 »

JavaScript 返回顶部实例（ JNI 入门教程）由讯客互联技术交流栏目发布，感谢您对讯客互联的认可，以及对我们原创作品以及文章的青睐，非常欢迎各位朋友分享到个人网站或者朋友圈，但转载请说明文章出处“JavaScript 返回顶部实例（ JNI 入门教程）”