打造最全的CMS類教程聚合！
第一種方法：在網頁<body></body>之間插入：
- <!--返回頂部開始-->
- <div id="full" style="width:50px; height:95px; position:fixed; left:50%; top:425px; margin-left:493px; z-index:100; text-align:center; cursor:pointer;"><a><img src="images/up.png" border=0 alt="返回頂部"></a></div>
- <script src="/js/gotop.js" type="text/javascript"></script>
- <!--返回頂部結束-->
修改圖片路徑和js路徑，保證圖片和JS都 能打開就行了 ！
JS文件下載：點擊下載
第二種方法：回到頂部功能：在網頁<body></body>之間插入：
- <!--引入jquery庫文件-->
- <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.4.4/jquery.min.js"></script>
- <!--功能代碼開始-->
- <script>
- (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>
返回首頁功能：
原理就是在基於上段代碼中的.click(function() {$("html, body").animate({ scrollTop: 0 }, 120);})點擊事件中加入轉向鏈接！具體代碼如下：
- <script>
- (function() {
- var $backToTopind = "回首頁", $backToTopEle = $('<div class="backToTop1"></div>').appendTo($("body"))
- .text($backToTopind).attr("title", $backToTopind).click(function() {location.href='http://www.meowpet.com';
- }), $backToTopFun = function() {
- var st = $(document).scrollTop(), winh = $(window).height();
- (st > 0)? $backToTopEle.show(): $backToTopEle.hide();
- //IE6下的定位
- if (!window.XMLHttpRequest) {
- $backToTopEle.css("top", st + winh);
- }
- };
- $(window).bind("scroll", $backToTopFun);
- $(function() { $backToTopFun(); });
- })();
- </script>
第三種方法：
- <script type="text/javascript">
- var w = 240;
- var h = 59;
- var str = "";
- var obj = document.getElementById("divStayTopLeft");
- if (obj)str = obj.innerHTML;
- if( typeof document.compatMode != 'undefined' && document.compatMode != 'BackCompat'){
- document.writeln('<DIV style="z-index:9;right:0;bottom:0;height:'+h+'px;width:'+w+'px;overflow:hidden;POSITION:fixed;_position:absolute; _margin-top:expression(document.documentElement.clientHeight-this.style.pixelHeight+document.documentElement.scrollTop);">');
- }
- else {
- document.writeln('<DIV style="z-index:9;right:0;bottom:0;height:'+h+'px;width:'+w+'px;overflow:hidden;POSITION:fixed;*position:absolute; *top:expression(eval(document.body.scrollTop)+eval(document.body.clientHeight)-this.style.pixelHeight);">');
- }
- document.writeln('<div style="clear:both;margin:auto;height:40px;font-size:14px;overflow:hidden;font-weight:bold;text-align:left;"><a href="javascript:scroll(0,0)" hidefocus="true"><img src="http://images.cnblogs.com/top.gif" alt="回到頂部" style="border: 0px;" /></a><a href="http://www.meowpet.com/" hidefocus="true"><img src="http://images.cnblogs.com/hsyg.gif" alt="返回首頁" style="border: 0px;" /></a></div> ');
- document.write('<div style="clear:both;margin:auto;overflow:hidden;text-align:left;">'+str+'</div>');
- document.writeln('</DIV>');
- </script>
里邊有2張圖片，可自行替換，這里就不提供了，找不到圖片路徑的話會顯示成alt里的漢字！