* {

  padding: 0px;

  margin: 0px;

}

​

.demo {

  /* position: relative; */

  margin: 5px auto;

  width: 600px;

}

​

.handr {

  width: 100%;

  height: 100px;

  background-color: aquamarine;

}

​

.banner {

  width: 100%;

  height: 500px;

  margin-top: 10px;

  background-color: chocolate;

}

​

.bodyr {

  width: 100%;

  height: 800px;

  margin-top: 10px;

  background-color: #00a4ff;

}

​

.loos {

  position: absolute;

  right: 35px;

  top: 200px;

  width: 50px;

  height: 100px;

  background-color: chartreuse;

}

​

.loos span {

  display: none;

}

​

var loos = document.querySelector(".loos");

var banner = document.querySelector(".banner");

var bodyr = document.querySelector(".bodyr");

var span = loos.querySelector("span");

// banner 距离页面顶部的高度

var bannertop = banner.offsetTop;

// 返回块 停止的位置

var loostop = loos.offsetTop - bannertop;

// body 距离页面顶部的高度

var bodyrtop = bodyr.offsetTop;

​

// 页面滚动事件

document.addEventListener("scroll", function () {

  if (window.pageYOffset >= bannertop) {

    // 固定定位 是以 浏览器可视区域为参考的

    // 绝对定位 是以 有定位的父元素 为参考的

    loos.style.position = "fixed";

    loos.style.top = loostop + "px";

  } else {

    loos.style.position = "absolute";

    loos.style.top = "200px";

  }

​

  if (window.pageYOffset >= bodyrtop) {

    span.style.display = "block";

  } else {

    span.style.display = "none";

  }

});

​

span.addEventListener("click", function () {

  // window.scroll(0, 0);

  animate(window, 0);

});

​

// 封装 移动函数

function animate(obj, target, callback) {

  // 先清除以前的定时器，只保留当前的一个定时器执行

  clearInterval(obj.timer);

  obj.timer = setInterval(function () {

    // 步长值写到定时器的里面

    // 把我们步长值改为整数 不要出现小数的问题

    var step = (target - window.pageYOffset) / 10;

    step = step > 0 ? Math.ceil(step) : Math.floor(step);

    if (window.pageYOffset == target) {

      // 停止动画 本质是停止定时器

      clearInterval(obj.timer);

      // 回调函数写到定时器结束里面

      callback && callback();

    }

    // 把每次加1 这个步长值改为一个慢慢变小的值  步长公式：(目标值 - 现在的位置) / 10

    window.scroll(0, window.pageYOffset + step);

  }, 15);

}

​