1949啦网--小小 痛苦,是因为能力和欲望不匹配造成的

jquery实现返回顶部代码

下面的<a>标签里面的href=“#top”就表示点击它就可以回到顶部,就不写回到顶部的代码了

解释一下:首先我们要做的功能是:用户打开网页,看不到按钮,滚动到了离页面顶端较远的地方,按钮自己出来了,点击按钮回到顶部,按钮又消失了

代码思路:当浏览器的滚动条靠近顶端的时候,“回到顶部”按钮始终隐藏(包括刚打开网页的时候,设置display:none),使用hide()方法;

当滚动条位置有了变化,触发浏览器窗口的滚动事件(scroll()方法),当滚动条位置距离初始位置大于一定数值(像素值)时,按钮显示(show()方法)

<!DOCTYPE html>  <html>  <head>  <meta charset="UTF-8">  <title></title>  <style type="text/css">  	#ym{  		text-align: center;  	}  #return-top{       width: 50px;       height: 50px;       background-color: #8FBC8F;/*背景颜色*/       color: white;/*字体颜色*/       position: fixed;/*固定按钮的位置,不随页面滚动*/       bottom: 40px;/*距离浏览器窗口底部的距离*/       right: 40px;/*距离浏览器窗口最右侧的距离*/       text-align: center;   display:none;/*重点!我们打开页面时不需要看到这个按钮,设置为不显示*/  }  #return-top a{  	font-size: 1vw;  	color: white;  	text-decoration: none; /*不要下划线*/       line-height: 20px; /*行高*/      display:block; /*不使用这个属性的话,文字对不齐。。。具体原因我没了解过*/     margin-top: 2px; /*2像素差不多了*/  }  </style>  </head>  <body>  	<div id="ym">  		<img src="https://www.qiquanji.com/data/img/dmj/201904041554385968512032.jpg"/>  		<img src="https://www.qiquanji.com/data/img/dmj/201904041554385968145935.jpg"/>  		<img src="https://www.qiquanji.com/data/img/dmj/201904041554385968212716.jpg"/>  	</div>  <div id="return-top">       <a href="#top">返回顶部</a>  </div>  </body>  <script src="../tu/jquery-1.11.3.min.js"></script>  <script type="text/javascript">        $(window).scroll(function(){             if($(this).scrollTop()>300){                  $("#return-top").show()             }else{                  $("#return-top").hide()             }        })  </script>  </html>

原文链接:https://www.qiquanji.com/post/7152.html

本站声明:网站内容来源于网络,如有侵权,请联系我们,我们将及时处理。

微信扫码关注

更新实时通知

作者:xialibing 分类:网页教程 浏览: