返回顶部设置_顶部状态栏怎么设置
Hi，大家好，我是编程小6，很荣幸遇见你，我把这些年在开发过程中遇到的问题或想法写出来，今天说一说
返回顶部设置_顶部状态栏怎么设置,希望能够帮助你!!!。
返回顶部
- 一、Demo
-
- <1>.要求
- <2>.功能
- 二、实现原理
- 代码
-
- <1>.Html
- <2>.Css
- <3>.Js
- 四、效果展示
一、Demo
<1>.要求
点击按钮之后可以由快到慢地回到顶部，处于顶部位置时按钮消失，按钮位于页面的右下方。 <2>.功能
当用户访问网页时，可以迅速的返回顶部。 二、实现原理
思路：先通过Html和Css设置好静态，然后通过Js调整button的属性 Html和Css部分都是简单的操作，着重点在于Js。 有2点需要设置： 第一点：如何设置button的隐藏？ 答：通过if else语句，当滚动到一定距离时，显示出button 第二点：如何实现由快到慢上滑？ 答：通过设置定时器，以及清楚定时器来实现 代码
<1>.Html
<!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>返回顶部</title> <link rel="stylesheet" href="./index.css"> </head> <body> <div class="test">1</div> <div class="test">2</div> <div class="test">3</div> <div class="test">4</div> <button>返回顶部</button> <script src="./index.js"></script> </body> </html> <2>.Css
*{
margin: 0; padding: 0; } .test{
height: 500px; width: 700px; border: 10px solid blue; margin: 100px auto; font-size: 100px; text-align: center; line-height: 500px; } button{
position: fixed; right: 20px; bottom: 20px; } <3>.Js
var button = document.querySelector('button') //获取button标签 window.onscroll = function(){
//设置隐藏 if(window.pageYOffset > 200){
button.style.display = "block"; }else{
button.style.display = "none"; } } button.addEventListener('click',function(){
var timeId = setInterval(function(){
//利用定时器控制由快到慢上滑 var scrollTop = document.documentElement.scrollTop; //获取页面滑动距离 if(scrollTop <= 0){
clearInterval(timeId); //当滑动距离小于0时，清楚定时器的作用 }else{
scroll(0,scrollTop - 100); //设置滑动距离 } },10) }) 四、效果展示
返回顶部
今天的分享到此就结束了，感谢您的阅读，如果确实帮到您，您可以动动手指转发给其他人。
上一篇
已是最后文章
下一篇
已是最新文章
相关推荐
最新文章
