js楼层跳跃

zzZjhz

于 2021-07-13 19:20:41 发布

阅读量164

点赞数

分类专栏： js 文章标签： js javascript dom

本文链接：https://blog.csdn.net/qq_58824036/article/details/118708724

版权

js 专栏收录该内容

5 篇文章 0 订阅

订阅专栏

js楼层跳跃

css

 * {
      margin: 0px;
      padding: 0px;
      list-style: none;
    }

    body,
    html {
      height: 100%;
    }

    ul {
      height: 100%;
    }

    ul li {
      height: 100%;
    }

    ol {
      position: fixed;
      top: 100px;
      left: 30px;
    }

    ol li {
      width: 50px;
      height: 30px;
      border: 1px solid #aaa;
      margin-top: 10px;
      line-height: 30px;
      text-align: center;
      cursor: pointer;
    }

HTML

<body>
  <ul>
    <li>袜子</li>
    <li>裤子</li>
    <li>鞋子</li>
    <li>帽子</li>
    <li>包包</li>
  </ul>
  <ol>
    <li>袜子</li>
    <li>裤子</li>
    <li>鞋子</li>
    <li>帽子</li>
    <li>包包</li>
  </ol>
</body>

js

var timer;
var target;
var leader = 0;
var ul = document.getElementsByTagName("ul")[0];
var ol = document.getElementsByTagName("ol")[0];
var ulLi = ul.children;
var olLi = ol.children;
var arrColor = ["pink", "blue", "green", "red", "yellow"];
for (var i = 0; i < ulLi.length; i++) {
  ulLi[i].style.background = arrColor[i];
  olLi[i].style.background = arrColor[i];
  olLi[i].index = i;  //重点，为元素增加一个index属性，之后再点击时，可以通过获取这个属性来判断是点击了那个li元素
  olLi[i].onclick = function () {
    clearInterval(timer);
    target = ulLi[this.index].offsetTop; //通过ol中的li元素的index属性判断对应的ul的li元素距离顶部的距离。
    timer = setInterval(function () {
      var step = (target - leader) / 10;
      step = step > 0 ? Math.ceil(step) : Math.floor(step);
      leader = leader + step;
      window.scrollTo(0, leader);
      if (Math.abs(target - leader) <= Math.abs(step)) {
        window.scrollTo(0, target);
        clearInterval(timer);
      }
    }, 30);
  }
}
window.onscroll = function () {
  leader = scroll().top;
}

function scroll() {
  //将获取scrollTop和scrollLeft的属性进行封装
  return {
    "top": window.pageYOffset || document.documentElement.scrollTop || document.body.scrollTop,
    "left": window.pageXOffset || document.documentElement.scrollLeft || document.body.scrollLeft
  };
}