jquery实现返回顶部代码
时间:6年前 阅读:4592
下面的<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,我们将及时处理。
微信扫码关注
更新实时通知
网友评论