Html+js固定侧边栏_goback.onclick = function() { window.scrollto(0, -CSDN博客

本文链接：https://blog.csdn.net/Playful_Elbow/article/details/124194825

<!DOCTYPE html>
<html>
   <head>
       <meta charset="UTF-8">
       <title></title>
       <style>
           .w {
              width: 70%;
              margin: 0 auto;
              margin-top: 10px;
           }

           .header {
               height: 100px;
               background-color: red;
           }

           .banner {
               height: 200px;
               background-color: pink;
           }

           .main {
               height: 1267px;
               background-color: orange;
           }
           .slider-bar {
               width: 70px;
               height: 200px;
               background-color: yellow;
               position: absolute;
               left: 85%;
               top: 330px;
           }
           .goBack {
               display: none;
               position: absolute;
               bottom: 0;
           }
       </style>
   </head>
   <body>
       <div class="header w">头部区域</div>
       <div class="banner w">Banner区域</div>
       <div class="main w">主体部分</div>
       <div class="slider-bar">
           <span class="goBack">返回顶部</span>
       </div>
       <script>
           var goBack = document.querySelector('.goBack');
           var slider = document.querySelector('.slider-bar');
           var banner = document.querySelector('.banner');
           var header = document.querySelector('.header');
           goBack.onclick = function () {
               window.scrollTo(0,0);
           };
           document.onscroll = function(){
               slider.style.top = window.pageYOffset;
               if (window.pageYOffset > (header.scrollHeight +banner.scrollHeight + 30)) {
                   goBack.style.display = 'block';
                   slider.style.position = 'fixed';
                   slider.style.left = '85%';
                   slider.style.top = '0px';
               } else {
                   slider.style.position = 'absolute';
                   slider.style.left = '85%';
                   slider.style.top = header.scrollHeight +banner.scrollHeight + 30
                   goBack.style.display = 'none';
               }
           };
       </script>
   </body>
</html>