页面缓慢置顶 html+css+js

布满荆棘的人生 2022-11-13 12:24 155阅读 0赞

## 效果（后面有源码）： ##

![在这里插入图片描述][2021032621273466.gif_pic_center]  
这是一个很简单的页面置顶按钮，点击后页面置顶。  
**视频制作过程：**

【html+css+js】页面缓慢置顶效果制作

[B站链接][B]

## 实现： ##

**1.定义标签，.bg是背景图，.zd是置顶按钮：**

**2. 置顶按钮基本css样式：**

.zd{ 
                position: fixed;
                bottom: 50px;
                right: -55px;
                width: 50px;
                height: 50px;
                background-color: rgba(19, 117, 182,.8);
                border-radius: 10px;
                text-align: center;
                line-height: 50px;
                font-size: 25px;
                color: aliceblue;
                cursor: pointer;
                user-select: none;
                transition: all 0.5s;
            }
            .zd:hover{ 
                color: rgb(35, 187, 15);
            }

position: fixed;  
bottom: 50px;  
right: -55px;  
width: 50px;  
height: 50px; 定位在屏幕右下角，在屏幕外，大小为50\*50。  
border-radius: 10px; 角度。  
text-align: center; 文本居中。  
user-select: none; 文本不可选中。  
transition: all 0.5s; 过渡效果。

**3. js部分，页面滚动：**

/* 获取元素*/
     var zd = document.querySelector(".zd");
     /* 点击事件*/
            zd.addEventListener('click',function(){      
            /* 定时器，缓慢置顶*/      
                  var time = setInterval(function(){ 
                  /* top为距离页面顶部距离*/
                      let top = pageYOffset;
                      /* 每次走的距离*/
                      let step = Math.ceil(top/50);
                      /* 滚动位置*/
                      window.scroll(0,top-step);
                      /* 到达顶部清除定时器*/
                      if(top==0){ 
                          clearInterval(time);
                      }
                  })
            },30)

**4. 按钮消失与隐藏：**

/* 绑定页面scroll滚动事件*/
    window.addEventListener('scroll',function(){       
     /* 当有滚动*/                
                if(document.documentElement.scrollTop>0){ 
                 /* 定义在屏幕内*/
                zd.style.right = 5 + 'px';
                }else{ 
                /* 定义在屏幕外*/
                    zd.style.right = -55 + 'px';
                }
            })

## 完整代码： ##

<!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <meta http-equiv="X-UA-Compatible" content="IE=edge">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title>Document</title>
        <style> @font-face { font-family: 'icomoon'; src: url('fonts/icomoon.eot?wr5es'); src: url('fonts/icomoon.eot?wr5es#iefix') format('embedded-opentype'), url('fonts/icomoon.ttf?wr5es') format('truetype'), url('fonts/icomoon.woff?wr5es') format('woff'), url('fonts/icomoon.svg?wr5es#icomoon') format('svg'); font-weight: normal; font-style: normal; font-display: block; } *{ font-family: 'icomoon'; margin: 0; padding: 0; box-sizing: border-box; } /* body{ height: 500vh; } */ .bg{ position: fixed; top: 0; left: 0; width: 100%; height: 100%; background-image: url(img/11.jpg); background-size: cover; z-index: -10; } .zd{ position: fixed; bottom: 50px; right: -55px; width: 50px; height: 50px; background-color: rgba(19, 117, 182,.8); border-radius: 10px; text-align: center; line-height: 50px; font-size: 25px; color: aliceblue; cursor: pointer; user-select: none; transition: all 0.5s; } .zd:hover{ color: rgb(35, 187, 15); } </style>
    </head>
    <body>
        <div class="bg"></div>
        <div class="zd"></div>
         <div style="width: 500px; height: 500px; background-color: rgb(118, 33, 129);"></div>
        <div style="width: 500px; height: 500px; background-color: rgb(36, 129, 33);"></div>
        <div style="width: 500px; height: 500px; background-color: rgb(118, 33, 129);"></div>
        <div style="width: 500px; height: 500px; background-color: rgb(129, 107, 33);"></div>
        <div style="width: 500px; height: 500px; background-color: rgb(129, 33, 33);"></div>
        <div style="width: 500px; height: 500px; background-color: rgb(197, 146, 204);"></div>
        <div style="width: 500px; height: 500px; background-color: rgb(41, 129, 33);"></div>
      <script> var zd = document.querySelector(".zd"); zd.addEventListener('click',function(){ var time = setInterval(function(){ let top = pageYOffset; let step = Math.ceil(top/50); window.scroll(0,top-step); if(top==0){ clearInterval(time); } }) },30) window.addEventListener('scroll',function(){ if(document.documentElement.scrollTop>0){ zd.style.right = 5 + 'px'; }else{ zd.style.right = -55 + 'px'; } }) </script>
    </body>
    </html>

## 总结： ##

**其它文章：**  
[炫彩流光文字 html+css][html_css]  
[气泡浮动背景特效 html+css][html_css 1]  
[简约时钟特效 html+css+js][html_css_js]  
[赛博朋克风格按钮 html+css][html_css 2]  
[仿网易云官网轮播图 html+css+js][html_css_js 1]  
[水波加载动画 html+css][html_css 3]  
[导航栏滚动渐变效果 html+css+js][html_css_js 2]  
[书本翻页 html+css][html_css 4]  
[3D立体相册 html+css][3D_ html_css]  
[霓虹灯绘画板效果 html+css+js][html_css_js 3]  
[记一些css属性总结（一）][css]  
[Sass总结笔记 ][Sass_]  
…等

[2021032621273466.gif_pic_center]: /images/20221022/6fc6c1bc080047a09b2c53fc784b42f2.png
[B]: https://www.bilibili.com/video/BV1F64y1Q7g4
[html_css]: https://blog.csdn.net/luo1831251387/article/details/113838748
[html_css 1]: https://blog.csdn.net/luo1831251387/article/details/113657124
[html_css_js]: https://blog.csdn.net/luo1831251387/article/details/113436552
[html_css 2]: https://blog.csdn.net/luo1831251387/article/details/113360844
[html_css_js 1]: https://blog.csdn.net/luo1831251387/article/details/114393724
[html_css 3]: https://blog.csdn.net/luo1831251387/article/details/111714413
[html_css_js 2]: https://blog.csdn.net/luo1831251387/article/details/111601962
[html_css 4]: https://blog.csdn.net/luo1831251387/article/details/111398881?spm=1001.2014.3001.5502
[3D_ html_css]: https://blog.csdn.net/luo1831251387/article/details/111032274?spm=1001.2014.3001.5502
[html_css_js 3]: https://blog.csdn.net/luo1831251387/article/details/114338506
[css]: https://blog.csdn.net/luo1831251387/article/details/111320280
[Sass_]: https://blog.csdn.net/luo1831251387/article/details/113179630