js实现悬浮按钮并回到页面顶部-阿里云开发者社区

js实现悬浮按钮并回到页面顶部

2022-12-11 559 发布于吉林

版权

本文内容由阿里云实名注册用户自发贡献，版权归原作者所有，阿里云开发者社区不拥有其著作权，亦不承担相应法律责任。具体规则请查看《阿里云开发者社区用户服务协议》和《阿里云开发者社区知识产权保护指引》。如果您发现本社区中有涉嫌抄袭的内容，填写侵权投诉表单进行举报，一经查实，本社区将立刻删除涉嫌侵权内容。

简介： js实现悬浮按钮并回到页面顶部

判断document.body.scrollTop 和 document.documentElement.scrollTop

其中一个大于零时，显示按钮，利用JavaScript的scrollTo将页面滚动到顶，并隐藏按钮。

代码（比其他版本，修正了对element.scrolltop的判断）

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>漂浮回顶部按钮</title>
<style>
body{
height:2000px;
}
.rTop{
width:100px; height:25px;
text-align:center; font-size:small;
line-height:25px; border:1px solid #999;
position:fixed; right:0; bottom:0;
border-bottom-color:#333; 
border-right-color:#333; margin:5px;
cursor:pointer; display:none
}
</style>
<script>
<!--拖动滚动条或滚动鼠标轮-->
window.onscroll=function(){
    if(document.body.scrollTop||document.documentElement.scrollTop){
        document.getElementById('rTop').style.display="block"
    }else{
    document.getElementById('rTop').style.display="none"
    button1style.cursor="hand"
}
}
<!--点击“返回顶部”按钮-->
function toTop(){
    window.scrollTo('0','0');
    button1style = document.getElementById('rTop').style;
    button1style.display="none"
    //button1style.cursor="hand"
    document.getElementById('rTop').style.display="none"
}
function moreTest(){
    for(let i =0; i< 50; i++){
       document.write("sss"+i+"<br>");
    }
}
</script>
</head>
<body>
    <div class="rTop" id="rTop" onClick="toTop()">返回顶部</div>
    <h1>顶部</h1>
    <h3><script>moreTest()</script></h3>
    <h1>底部</h1>
</body>
</html>