回最上方
常常會看到攏長的網頁會放個”回最上方”，但是都是按一下就跳到最上面，以下是小弟做的回到最上方，但是會以比較順滑的方式滑上去。
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 | scrollToTop=new Object(); scrollToTop.scrollTop=null; scrollToTop.scrollLeft=null; scrollToTop.action=function(){ if(scrollToTop.scrollTop==null){ var pageY = window.pageYOffset || (document.documentElement.scrollTop || document.body.scrollTop); var pageX = window.pageXOffset || (document.documentElement.scrollLeft || document.body.scrollLeft); scrollToTop.scrollTop=pageY; scrollToTop.scrollLeft=pageX; } scrollToTop.scrollTop=scrollToTop.scrollTop-20 scrollToTop.scrollLeft=scrollToTop.scrollLeft-20 if(scrollToTop.scrollTop<0){scrollToTop.scrollTop=0}; if(scrollToTop.scrollLeft<0){scrollToTop.scrollLeft=0}; window.scroll(scrollToTop.scrollLeft,scrollToTop.scrollTop); if(scrollToTop.scrollTop>0){ setTimeout("scrollToTop.action();",10) return; } scrollToTop.scrollTop=null; scrollToTop.scrollLeft=null; } |
只要在超連結上這樣做就可以了:
1 | <a href='javascript:scrollToTop.action();'>回到最上方</a> |
這隻小程式可以在ie和firefox上跑，至於chrome我就不知道了。
Related posts:
- 複製DOM節點的JavaScript函式 在重度寫JavaScript的程式設計師，可能都了解的這個函數 cloneNode() 當你有個DOM,像一個表格TABLE或是選擇項SELECT,如果不用innerHTML的方式複製，clondeNode是個很好的JavaScript選擇直接複製DOM myDivObj=document.createElement('div');//先製造一個DIV document.getElementsByTagName('body')[0].appendChild(myDivObj);//把製造的DIV放進BODY標籤裡面 myDivObj.innerHTML='DOM 天字一號';//填寫DIV的內容 cloneMyDivObj=myDivObj.cloneNode(true);//複製一份新的DIV document.getElementsByTagName('body')[0].appendChild(cloneMyDivObj);//把新複製的DIV塞進BODY標籤裡面 cloneMyDivObj.innerHTML+='的複製品';//更改複製的DIV的內容...
Related posts brought to you by Yet Another Related Posts Plugin.
我網站的回到最上方
也是那種緩緩得上去喔
但是不是我寫的 ^^
恩 這很容易寫 網路上也有很多範例，而為什麼寫這個是因為逛到dynamic drive裡的一篇同樣的東西，看到他居然是用jquery寫這個東西，而且是寫了幾百行，jquery很紅是沒有錯，可是為了這個簡單的功能要使用者每次都下載jquery的程式碼，這符合效益嗎?