回到顶部-DOM

Youser511

已于 2022-07-20 14:41:27 修改

阅读量101

点赞数

分类专栏：学习文章标签：前端 javascript

于 2022-07-15 22:10:10 首次发布

本文链接：https://blog.csdn.net/qq_45025670/article/details/125813112

版权

学习专栏收录该内容

92 篇文章 1 订阅

订阅专栏

使用scrollTop

	<style>
		.up {
			display: none; width: 100px; height: 100px; background: red; 
			position: fixed; right: 10px; bottom: 20px;
		}
	</style>
	<body>
		//p{aaaaaaaaaaaaaaaaaaaaaaaaaaaa}*100
		<div id="top" class="up">回到顶部</div>
		<script>
			var up = document.getElementById("top");
			window.onscroll = function(){
				//当前页面滚动的距离？？
				var _top = document.body.scrollTop || document.documentElement.scrollTop;
				if(_top >= 1000){
					up.style.display = "block";
				} else {
					up.style.display = "none";
				}
			}
			up.onclick = goTop;
			function goTop(){
				document.body.scrollTop = document.documentElement.scrollTop = 0;
			}
		</script>
	</body>

通过滚动距离判断回到顶部的盒子是否隐藏，回到顶部的方法就是滚动距离归零。

使用动画

    .main{
      width:1000px;
      margin: 30px auto;
    }
    .box1{
      height: 300px;
      background-color: red;
    }
    .box2{
      height: 500px;
      background-color: yellow;
    }
    .box3{
      height: 900px;
      background-color: green;
    }

    .back{
      position: absolute;
      left: 80%;
      top: 400px;
      display: none;
      width: 50px;
      height: 50px;
      background-color: blueviolet;
    }

前三个盒子，都是用来增加页面篇幅的，不用看

  <div class="box1 main"></div>
  <div class="box2 main"></div>
  <div class="box3 main"></div>


  <div class="back"></div>

// 1  获取元素
var oBack = document.querySelector('.back');
var  oBox2 = document.querySelector('.box2');
var  oBox2Top = oBox2.offsetTop

oBox2.offsetTop的所在线，是隐藏back盒子的分界线

document.addEventListener('scroll',function(){
    console.log(window.pageYOffset)
    //  页面被滑走的部分高度  大于等于  黄色盒子 距页面顶部的距离   把back 设置为fixed定位
        if(window.pageYOffset  >= oBox2Top){
           oBack.style.position = 'fixed'
           oBack.style.display = 'block'
        }else{
          oBack.style.position = 'absolute'
           oBack.style.display = 'none'
        }

})

给back添加点击事件，

oBack.addEventListener('click',function(){
  // window.scroll(0,0)
  animate(window,0)
})

/* obj目标对象  target 目标位置 */
function animate(obj,target,callback){
  clearInterval(obj.timer);
  obj.timer = setInterval(function(){
    // 求步长  步长要写到定时器
    var step = (target - window.pageYOffset) /10;
    // 步长向上取整   变为1   到最后(目标值-当前位置) 小于10时  步长变为1px  1px的移动
    step = step > 0 ? Math.ceil(step) : Math.floor(step)
    
    if(window.pageYOffset == target){
      clearInterval(obj.timer);
      // 回调函数要写在定时器结束里
      callback && callback()//有该参数就执行，没有就不执行（js短路）
    }
    // 把每次加1这个步长的值改为一个慢慢变小的值  步长公式：(目标位置 - 当前位置) / 10
    //Window.scroll() 滚动窗口至文档中的特定位置。
    window.scroll(0,window.pageYOffset + step);

  },15)
}