JS-电梯导航（显示和返回效果）

效果说明:（1）当下拉滚动轴超过300px时，显示电梯导航
（2）点击返回顶部，立即返回顶部

点击查看代码 
<body>
  <script>
    //效果说明（1）当下拉滚动轴超过300时，显示电梯导航
    //（2）点击返回顶部，立即返回顶部
    const elevator = document.querySelector('.xtx-elevator')
    window.addEventListener('scroll', function () {
      const n = document.documentElement.scrollTop
      elevator.style.opacity = n >= 300 ? 1 : 0
    }) //效果1
    const backTop=document.querySelector('#backTop')
    backTop.addEventListener('click',function(){
      document.documentElement.scrollTop=0
    })//效果2
  </script>
</body>
posted @ 2024-04-17 22:29  xjZhang  阅读(97)  评论(0)    收藏  举报