js仿京东电梯导航

<style>

    html {

      scroll-behavior: smooth;

    }

    body {

      height: 3000px;

      position: relative;

    }

    li {

      list-style: none;

    }

    ul {

      width: 5%;

      height: 328.8px;

      background-color: pink;

      color: #fff;

      position: fixed;

      right: 10px;

      top: 200px;

      opacity: 0;

    }

    ul li {

      width: 40px;

      padding: 10px 0;

    }

    .box div {

      width: 800px;

      height: 300px;

      background: pink;

      margin: 40px auto;

      font-size: 40px;

      color: #fff;

      text-align: center;

    }

    .active {

      color: forestgreen;

    }

  </style>

<div class="nav">

    <ul>

      <li data-name="new">新鲜好物</li>

      <li data-name="pula">人气推荐</li>

      <li data-name="hot">热门品牌</li>

      <li data-name="topic">最新专题</li>

      <li class="back">返回顶部</li>

    </ul>

  </div>

  <div class="box">

    <div class="box_new">新鲜好物</div>

    <div class="box_pula">人气推荐</div>

    <div class="box_hot">热门品牌</div>

    <div class="box_topic">最新专题</div>

  </div>

 <script>

//返回顶部

    (function () {

//获取元素

      const nav = document.querySelector("ul");

      const back = document.querySelector(".back");

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

//获取页面的高度

        let n = parseInt(document.documentElement.scrollTop);

        nav.style.opacity = n >= nav.offsetTop ? 1 : 0;

      });

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

        document.documentElement.scrollTop = 0;

      });

    })();

//点击对应的导航直接到对应的内容区

    (function () {

//获取元素

      const ul = document.querySelector("ul");

//把点击事件委托给ul

      ul.addEventListener("click", function (e) {

//先看能不能找到带有active类的元素

        if (document.querySelector(".active"))

          document.querySelector(".active").classList.remove("active");

        if (e.target.tagName === "LI" && e.target.dataset.name) {

          e.target.classList.add("active");

          document.documentElement.scrollTop = document.querySelector(

            `.box_${e.target.dataset.name}`

          ).offsetTop;

        }

      });

    })();

//下拉到对应内容区域，则导航高亮显示

    (function () {

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

        const news = document.querySelector(".box_new").offsetTop;

        const pulas = document.querySelector(".box_pula").offsetTop;

        const hots = document.querySelector(".box_hot").offsetTop;

        const topics = document.querySelector(".box_topic").offsetTop;

        const ne = document.querySelector("[data-name=new]");

        const pula = document.querySelector("[data-name=pula]");

        const hot = document.querySelector("[data-name=hot]");

        const topic = document.querySelector("[data-name=topic]");

        const n = parseInt(document.documentElement.scrollTop);

        console.log(n);

        if (document.querySelector(".active"))

          document.querySelector(".active").classList.remove("active");

        // console.log(news,pulas,hots,topics);

        if (n >= news && n < pulas) {

          ne.classList.add("active");

        } else if (n >= pulas && n < hots) {

          pula.classList.add("active");

        } else if (n >= hots && n < topics) {

          hot.classList.add("active");

        } else if (n >= topics) {

          topic.classList.add("active");

        }

      });

    })();

  </script>