一个容易回到顶部效果-超过高度显示侧边返回顶部按钮
发布时间：2022-04-18 10:01:03 所属栏目：经验 来源：互联网
导读：代码如下： !doctype html html head meta charset=utf-8 title/title script src=https://cdn.staticfile.org/jquery/1.11.1/jquery.js/scriptstyle p#top{ position:fixed;display:none;bottom:100px;right:80px;} p#top a{text-align:center;text-decorat
|
代码如下： <!doctype html> <html> <head> <meta charset="utf-8"> <title></title> <script src="https://cdn.staticfile.org/jquery/1.11.1/jquery.js"></script><style> p#top{ position:fixed;display:none;bottom:100px;right:80px;} p#top a{text-align:center;text-decoration:none;color:#d1d1d1;display:block;width:64px;transition:color 1s;} p#top a:hover{ color:#979797; } p#top a span{background:url(top.png) no-repeat center;border-radius:6px;display:block;height:64px;transition:background 1s;} #top a:hover span{background:url(top.png) no-repeat center;} </style> <script> $(document).ready(function(e) { //当滚动条的位置处于距顶部100像素以下时，跳转链接出现，否则消失 $(function () { $(window).scroll(function(){ if ($(window).scrollTop()>100){ //大于100行才出现跳转箭头 $("#top").fadeIn(1500); //大于1500行时跳转箭头慢慢透明显示 } else { $("#top").fadeOut(1500); //大于1500行时跳转箭头慢慢透明消失 } }); //当点击跳转链接后，回到页面顶部位置 $("#top").click(function(){ $('body,html').animate({scrollTop:0},1000);//1s完成回到顶部 return false; }); }); }); </script> </head> <body> <div style="width: 100%;height: 2000px;"></div> <p id="top"> <a href="#top"> <span></span> 返回顶部 </a> </p> </body> （编辑：大同站长网） 【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容! |
站长推荐