回到顶部

Whnist

已于 2023-01-13 10:53:12 修改

阅读量540

点赞数

文章标签： javascript 前端 html

于 2023-01-11 22:24:31 首次发布

本文链接：https://blog.csdn.net/Meg_Fu/article/details/128651832

版权

内容
点击按钮之后可以由快到慢地回到顶部，处于顶部位置时按钮消失，按钮位于页面的右下方

实验原理
给按钮绑定定时器，
通过scrollTop：“元素中的内容”超出“元素上边界”的那部分的高度，实现会到顶部。
用JS对CSS样式进行编辑，实现按钮消失。

代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<style>
   *{
    margin: 0;
    padding: 0;
   }
   body{
	    height: 3000px;
	}
   #top{
    width: 100%;
    height: 100px;
    background-color: black;
    color: white;
    text-align: center;
   }
   #back{
    width: 50px;
    height: 50px;
    position: fixed;
    right: 0;
    bottom: 50px;
   }
</style>
<body>
    <div id="top">顶部</div>
    <button id="back">返回顶部</button>
    <script>
        var back=document.getElementById("back"); //获取ID
        back.onclick=function(){  //设置按钮点击
            var timer = setInterval(function(){
                //设置滚动时间
                if(document.documentElement.scrollTop>0){
					document.documentElement.scrollTop-=100;
						
					//当滑动条距顶部为0时,结束间隔任务
					if(document.documentElement.scrollTop==0){
						clearInterval(timer);
					}
				}
            },30);
        }
        onscroll=function(){ //设置按钮隐藏
            if(scrollY==0){
                back.style.display = "none";
            }else{
                back.style.display = "block";
            }
        }    
    </script>    
</body>
</html>

实验效果

回到顶部

Whnist

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
回到顶部

通过scrollTop：“元素中的内容”超出“元素上边界”的那部分的高度，实现会到顶部。点击按钮之后可以由快到慢地回到顶部，处于顶部位置时按钮消失，按钮位于页面的右下方。用JS对CSS样式进行编辑，实现按钮消失。//当滑动条距顶部为0时,结束间隔任务。
复制链接

扫一扫