返回顶部效果!

妖狐艹你老母 2022-06-04 06:15 244阅读 0赞

刚刚需要为网页添加一个返回顶部的效果，又懒得自己写，百度了一下找到两个还不错的。这里分享给大家。

<!DOCTYPE html> <html lang="en"> <head> <meta name="toTop" content="true"> <meta charset="UTF-8"> <title>返回顶部</title> <style> html{ height:3000px; } </style> <script src="http://libs.baidu.com/jquery/2.0.0/jquery.min.js"></script> <script type="text/javascript"> jQuery(document).ready(function($) { if($("meta[name=toTop]").attr("content")=="true"){ $("<div id='toTop'><img src='img/1.png'></div>").appendTo('body'); $("#toTop").css({ width: '50px', height: '50px', bottom:'10px', right:'15px', position:'fixed', cursor:'pointer', zIndex:'999999', }); if($(this).scrollTop()==0){ $("#toTop").hide(); } $(window).scroll(function(event) { /* Act on the event */ if($(this).scrollTop()==0){ $("#toTop").hide(); } if($(this).scrollTop()!=0){ $("#toTop").show(); } }); $("#toTop").click(function(event) { /* Act on the event */ $("html,body").animate({ scrollTop:"0px"}, 666 ) }); } }); </script> </head> <body> <div>向下滚动查看效果</div> </body> </html>

<!DOCTYPE html> <html lang="en"> <head> <meta name="toTop" content="true"> <meta charset="UTF-8"> <title>返回顶部</title> <style> html{ height:3000px; } #to_top{width:25px;padding:5px; height:82px; font:14px/20px arial; text-align:center; background:#06c; position:absolute; cursor:pointer; color:#fff;} </style> <script src="http://libs.baidu.com/jquery/2.0.0/jquery.min.js"></script> <script type="text/javascript"> $(function(){ var oTop = document.getElementById("to_top"); var screenw = document.documentElement.clientWidth || document.body.clientWidth; var screenh = document.documentElement.clientHeight || document.body.clientHeight; oTop.style.left = screenw - oTop.offsetWidth-50 + "px"; oTop.style.top = screenh - oTop.offsetHeight + "px"; window.onscroll = function () { var scrolltop = document.documentElement.scrollTop || document.body.scrollTop; oTop.style.top = screenh - oTop.offsetHeight + scrolltop-60 + "px"; } oTop.onclick = function () { document.documentElement.scrollTop = document.body.scrollTop = 0; } }); </script> </head> <body> <div id="to_top">返回顶部</div> </body> </html>

预览地址：[http://www.bright2017.top/test1/test1-06/][http_www.bright2017.top_test1_test1-06]

预览地址：[http://www.bright2017.top/test1/test1-07/][http_www.bright2017.top_test1_test1-07]

[http_www.bright2017.top_test1_test1-06]: http://www.bright2017.top/test1/test1-06/
[http_www.bright2017.top_test1_test1-07]: http://www.bright2017.top/test1/test1-07/