HTML5商城開發五實現返回頁面頂部

芝麻軟體發表於2014-02-21
HTML

本文內容主要是網上參考收集，介紹四種簡單的返回頁面頂部程式碼，可以使用簡單的HTML錨標記，也可使用Javascript Scroll函式動態返回等等。

一、使用錨標記返回頁面頂部

使用HTML錨標記最簡單，點選後會在位址列顯示這個錨標記。

需要標記id特麻煩，尤其是每個頁面都要使用，頂部展示又不一樣。

頁面頂部放置：

<a name=”top” id=”top”></a>

放置位置在<body>標籤之後隨便找個地方放都可以，只要靠近頂部即可。

頁面底部放置：

<a href=”#top” target=”_self”>返回頂部</a>

二、使用Javascript Scroll函式返回頂部

scrooll函式用來控制滾動條的位置，有兩種很簡單的實現方式：

方式1：

[javascript] view plaincopy
  1. <a href=“javascript:scroll(0,0)” mce_href=“javascript:scroll(0,0)”>返回頂部</a>  

scroll第一個引數是水平位置，第二個引數是垂直位置，比如要想定位在垂直50畫素處，改成scroll(0,50)就可以了。

方式2：

本方式是漸進式返回頂部，要好看一些，程式碼如下：

[javascript] view plaincopy
  1. function pageScroll() {  
  2. window.scrollBy(0,-10);  
  3. scrolldelay = setTimeout(`pageScroll()`,100);  
  4.   
  5. }  
  6. <a href=“pageScroll();” mce_href=“pageScroll();”>返回頂部</a>  

這樣就會動態返回頂部，不過雖然返回到頂部但是程式碼仍在執行，還需要在pageScroll函式加一句給停止掉。

[javascript] view plaincopy
  1. if(document.body.scrollTop==0) clearTimeout(scrolldelay);  

三、使用Onload加上scroll功能實現動態返回頂部

1、首先在網頁BODY標籤結束之前加上：

<div id=”gotop”>返回頂部</div>

2、再呼叫以下JS指令碼部分：

[c-sharp] view plaincopy
  1. BackTop=function(btnId){  
  2.     var btn=document.getElementById(btnId);  
  3.   
  4.     var d=document.documentElement;  
  5.    
  6.     window.onscroll=set;  
  7.    
  8.     btn.onclick=function (){  
  9.    
  10.         btn.style.display=“none”;  
  11.   
  12.         window.onscroll=null;  
  13.    
  14.         this.timer=setInterval(function(){  
  15.    
  16.             d.scrollTop-=Math.ceil(d.scrollTop*0.1);  
  17.    
  18.             if(d.scrollTop==0) clearInterval(btn.timer,window.onscroll=set);  
  19.    
  20.         },10);  
  21.    
  22.     };  
  23.    
  24.     function set(){btn.style.display=d.scrollTop?`block`:“none”}  
  25.    
  26. };  
  27.    
  28. BackTop(`gotop`);  

對Z-BLOG而言，可以放到$(document).ready(function(){….函式中，也可以獨立存成一個js檔案，比如gotop.js，再通過：

<SCRIPT src=”/js/gotop.js” type=text/javascript></SCRIPT>

來呼叫，當然了位置最好放在“返回頂部”標籤的下面，該呼叫方法已假設路徑為JS，其它位置請自行修改。

四、以一定的速度滑動返回頂部

$(".totop").click(function () { 
        var speed = 200;//滑動的速度
        $(`html,body`).animate({ scrollTop: 0 }, speed);//去頂部
        $(`html,body`).animate({ scrollTop: $(`#footer`).offset().top }, speed);//去底部 
});

 最喜歡這種效果，簡單又能動態往上滾動。

 

 

主要參考：

http://www.mediacollege.com/internet/javascript/page/scroll.html

http://blog.csdn.net/w3031213101/article/details/6363858

 


相關文章