虎翼源码网 - 轻松建站从此开始!

虎翼源码网

当前位置: 虎翼 > 网络编程 > JavaScript >

JavaScript 返回顶部实例

时间:2021-02-26 00:16来源:虎翼 作者:虎翼 点击:
本章节为大家介绍如何通过 JS/CSS 实现网页返回顶部效果。 代码添加在这中间 style代码添加在这中间 /script /body /html CSS 按钮样式: #myBtn { display: none ; /* 默认隐藏 */ position: fixed ; botto

本章节为大家介绍如何通过 JS/CSS 实现网页返回顶部效果。
代码添加在这中间  <style>代码添加在这中间</script>

 
</body>
</html>

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; }
 

(责任编辑:虎翼源码)
织梦二维码生成器
顶一下
(0)
0%
踩一下
(0)
0%
------分隔线----------------------------
发表评论
请自觉遵守互联网相关的政策法规,严禁发布色情、暴力、反动的言论。
评价:
表情:
用户名: 验证码:点击我更换图片
栏目列表
推荐内容