侧边栏的实现

有时候页面太长想快速回到顶部

此时就需要一个侧边栏帮我们提高工作效率

唰~

一下就回到顶部！

今天我就带来这个效果的实现！

step1

制作前我们需要搭建一个HTML框架

 <!-- 侧边栏制作 -->
    <div class="home-tool">
        <a href="javascript:;">
            <div>
                <img src="素材/navgation/navigation.png" alt="">
            </div>
            <span>手机APP</span>
        </a>
        <a href="javascript:;">
            <div>
                <img src="素材/navgation/navigation2.png" alt="">
            </div>
            <span>个人中心</span>
        </a>
        <a href="javascript:;">
            <div>
                <img src="素材/navgation/navgation3.png" alt="">
            </div>
            <span>售后服务</span>
        </a>
        <a href="javascript:;">
            <div>
                <img src="素材/navgation/navgation4.png" alt="">
            </div>
            <span>人工客服</span>
        </a>
        <a href="javascript:;">
            <div>
                <img src="素材/navgation/navgation5.png" alt="">
            </div>
            <span>购物车</span>
        </a>
        <a href="javascript:;" class='goBack'>
            <div>
                <img src="素材/images/The_first主页.png" alt="">
            </div>
            <span>回顶部</span>
        </a>
    </div>
    <!-- 主体 -->
    <header class="w">header区域</header>
    <nav class="w">nav区域</nav>
    <section class="w">main主体部分</section>
    <footer class="w">footer底部区域</footer>

形成的效果，如下图：

step2 

当我们搭完框架后，想实现的效果：

• 我们就需要实现当滚动到一定高度时“回到顶部”这个框框就会出现
• 当我们点击“回到顶部“就能立刻回到顶部”

<script>
    var homeTool = document.querySelector('.home-tool');
    var nav = document.querySelector('nav');
    // navTop 被卷去头部的大小  一定要写到滚动的外面
    var navTop = nav.offsetTop;
    //当我们侧边栏固定定位之后应该变化的数值
    var homeToolTop = homeTool.offsetTop - navTop;
    //获取section  main主体元素
    var main = document.querySelector('section');
    var goBack = document.querySelector('.goBack');
    var mainTop = main.offsetTop;

    // 页面滚动scroll
    document.addEventListener('scroll', function() {
            //window.pageYOffset 页面被卷去的头部
            //当我们页面滚到了main盒子，就显示goback模块
            if (window.pageYOffset >= mainTop) {
                goBack.style.display = 'block';
            } else {
                goBack.style.display = 'none';
            }
        })
        //当我们点击了返回顶部模块，就让窗口滚动到页面的最上方
        animate(window, 0);
    });


//动画函数
  function animate(obj, target, callback) {
      // console.log(callback);    callback=function(){}

      //给不同的元素指定不同的定时器
      //不断点击开始按钮，速度会越来越快，因为开始了太多的定时器
      clearInterval(obj.timer); //解决方案：让元素只有一个定时器
      obj.timer = setInterval(function() {
          // 步长值写到定时器里面
          // var step = Math.ceil((target - obj.offsetLeft) / 10);
          var step = (target - window.pageYOffset) / 10;
          step = step > 0 ? Math.ceil(step) : Math.floor(step);
          if (window.pageYOffset == target) {
              clearInterval(obj.timer);
              //回调函数写到哦定时器结束里面
              // if (callback) {
              //     callback();
              // }
              callback && callback();
          }
          //当前的位置+1
          //每次加1 改为一个慢慢变小的值 
          // obj.style.left = window.pageYOffset + step + 'px';
          window.scroll(0, window.pageYOffset + step);
      }, 30)
  }
</script>

代码里面为了能够跳转的时候柔和一些就加了动画效果animate。

Sum

其实这个制作不是很难只要把道理弄明白了，制作就会很简单啦~