为了提高网站的浏览体验及友好度,相信大部分网站需要一个返回顶部的按钮,如果使用传统的a标记,再做一个div加上链接的话,非常麻烦,不仅每个页面都需要添加,而且不能实现非常智能的效果及简化维护时间。
下面,我分享一下我自己经常使用的一个返回按钮,当然,你也可以在这个基础上修改或者自己做一个。
示例:https://www.feidd.com/demo/go_top.html
建议将以下代码放在包函文件中,这样不必每个页面都添加,日后也好维护。
正文如下:
一、先调用jquery。
1 2 3 |
<!-- 这里是用来调用jquery的 --> <script src="js/jquery.min.js" type="text/javascript"></script> <!-- 这里是用来调用jquery的 --> |
二、在页面任意位置添加如下代码。
(这里有一个样式表,和一个返回按钮所用的代码,你可以将样式表整合一下。)
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 |
<!--这里是返回顶部所需要的代码--> <!--样式表--> <style type="text/css"> .backToTop { ??? display: none; ??? width: 18px; ??? line-height: 1.2; ??? padding: 5px 0; ?? background-color: #000; ??? color: #fff; ??? font-size: 12px; ??? text-align: center; ??? position: fixed; ??? _position: absolute; ??? right: 10px; ??? bottom: 100px; ??? _bottom: "auto"; ??? cursor: pointer; ??? opacity: .6; ??? filter: Alpha(opacity=60); } </style> |
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 |
<!--返回顶部按钮的代码,里面有值,可以自己修改,当页面高度大于多少时显示返回top按钮。--> <script language="javascript">; (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> |
-全文完-
转载请注明原文地址及作者,谢谢合作。