网站设计中返回顶部学习记录
html:
<!DOCTYPE html> <html lang="zh-cn"> <head> <meta charset="UTF-8" /> <title>网络科技</title> <meta name="keywords" content="网络科技企业公司" /> <meta name="description" content="网络科技企业公司" /> <meta name="viewport" content="width=device-width,initial-scale=1.0,maximum-scale=1.0,minimum-scale=1.0,user-scalable=no" /> <link rel="stylesheet" href="css/bootstrap.min.css"> <link rel="stylesheet" href="css/style.css"> <!--控制返回顶部css效果--> <script type="text/javascript" src="js/jquery-2.2.4.min.js"></script> <!--必须引入--> <script src="js/bootstrap.min.js"></script> <!--必须引入--> </head> <body> <script> //返回顶部js (function() { var $backToTopTxt = "返回顶部", $backToTopEle = $('<div class="backToTop"></div>').appendTo($("body")) .text($backToTopTxt).attr("title", $backToTopTxt).click(function() { $("html, body").animate({ scrollTop: 0 }, 120); }), $backToTopFun = function() { var st = $(document).scrollTop(), winh = $(window).height(); (st > 0)? $backToTopEle.show(): $backToTopEle.hide(); //IE6下的定位 if (!window.XMLHttpRequest) { $backToTopEle.css("top", st + winh - 166); } }; $(window).bind("scroll", $backToTopFun); $(function() { $backToTopFun(); }); })(); </script> </body> </html>style.css:
/*返回顶部*/ .backToTop { display: none; width: 30px; line-height: 1.2; padding: 5px 0; background-color: #000; color: #00dfb1; font-size: 16px; text-align: center; position: fixed; _position: absolute; right: 10px; bottom: 100px; _bottom: "auto"; cursor: pointer; opacity: 0.6; filter: Alpha(opacity=60); }