點(diǎn)選TOP后并不是直接跳到頁頂?shù)?，而是滾動(dòng)上去的
更新時(shí)間：2007年02月23日 00:00:00 作者：
如果網(wǎng)頁太長了，一般都使用錨標(biāo)簽快速返回到TOP
<a href="#header" title="back to top">top</a> 確實(shí)很簡單，不過卻有一些高手讓這個(gè)簡變成不簡單：
國外演示地址：http://tonyyoo.com/v2/
點(diǎn)選TOP后并不是直接跳到頁頂?shù)?，而是滾動(dòng)上去的。。而且距離頁頂越長滾動(dòng)的速度也就越快。。。
研究了下，用到的JS有4個(gè)：
<script type="text/javascript" src="scripts/prototype.lite.js"></script>
<script type="text/javascript" src="scripts/moo.fx.js"></script>
<script type="text/javascript" src="scripts/moo.fx.pack.js"></script>
<script type="text/javascript" src="scripts/pageScroll.js"></script>
看起來都好復(fù)雜。。不知道有沒有可以精簡點(diǎn)的代碼可以實(shí)現(xiàn)同樣的效果呢，我是做不來的了。。
在頁面onload之后，遍歷所有超鏈接，判斷href中是否有#header，有的話觸發(fā)scrollTo即可。。。
[Ctrl+A 全選 注:引入外部Js需再刷新一下頁面才能執(zhí)行]
<a href="#header" title="back to top">top</a> 確實(shí)很簡單，不過卻有一些高手讓這個(gè)簡變成不簡單：
國外演示地址：http://tonyyoo.com/v2/
點(diǎn)選TOP后并不是直接跳到頁頂?shù)?，而是滾動(dòng)上去的。。而且距離頁頂越長滾動(dòng)的速度也就越快。。。
研究了下，用到的JS有4個(gè)：
<script type="text/javascript" src="scripts/prototype.lite.js"></script>
<script type="text/javascript" src="scripts/moo.fx.js"></script>
<script type="text/javascript" src="scripts/moo.fx.pack.js"></script>
<script type="text/javascript" src="scripts/pageScroll.js"></script>
看起來都好復(fù)雜。。不知道有沒有可以精簡點(diǎn)的代碼可以實(shí)現(xiàn)同樣的效果呢，我是做不來的了。。
在頁面onload之后，遍歷所有超鏈接，判斷href中是否有#header，有的話觸發(fā)scrollTo即可。。。
[Ctrl+A 全選 注:引入外部Js需再刷新一下頁面才能執(zhí)行]
相關(guān)文章
JS實(shí)現(xiàn)的論壇Ajax打分效果完整實(shí)例
這篇文章主要介紹了JS實(shí)現(xiàn)的論壇Ajax打分效果,以完整實(shí)例形式分析了JavaScript響應(yīng)鼠標(biāo)事件動(dòng)態(tài)操作頁面元素樣式的相關(guān)技巧,需要的朋友可以參考下2015-10-10
這篇文章主要介紹了JS判斷iframe是否加載完成的方法,提供了2種實(shí)現(xiàn)方法,可分別針對IE內(nèi)核與非IE內(nèi)核瀏覽器進(jìn)行判斷與操作,涉及javascript事件操作與判定技巧,需要的朋友可以參考下2016-08-08
這篇文章主要介紹了BootStrap入門教程(三)之響應(yīng)式原理的相關(guān)資料，非常不錯(cuò)，具有參考借鑒價(jià)值，感興趣的朋友一起看看吧2016-09-09
如何實(shí)現(xiàn)從照片中裁切自已的肖像呢？...2007-03-03
前端實(shí)現(xiàn)視頻文件動(dòng)畫幀圖片提取完整教程
相信很多小伙伴在一些短視頻平臺上傳視頻的時(shí)候,系統(tǒng)會自動(dòng)幫我們生成一些視頻中的畫面幀的圖片,讓我們作為視頻封面的功能,那么這些短視頻平臺是如何從視頻中抽取關(guān)鍵幀來作為封面,今天博主就帶著大家一起來探討這個(gè)問題,感興趣的小伙伴跟著小編一起來看看吧2025-04-04
需求：JSP網(wǎng)頁中要顯示pdf文件,下面給出二種方案，JS插件那種不錯(cuò)啊2013-12-12
javascript的var與let,const之間的區(qū)別詳解
這篇文章主要為大家介紹了?javascript的var與let,const之間的區(qū)別，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下，希望能夠給你帶來幫助2021-12-12
下面小編就為大家?guī)硪黄狫S定義類的六種方式詳解。小編覺得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考，一起跟隨小編過來看看吧，祝大家游戲愉快哦2016-05-05
兩種常用的javascript數(shù)組去重方法思路及代碼
第一種是常規(guī)的方法:建一個(gè)新的數(shù)組存放結(jié)果,for循環(huán)中每次從原數(shù)組中取出一個(gè)元素，用indexOf查找新數(shù)組中是否有該元素，至于第二種詳細(xì)的看下本文哦2013-03-03
這篇文章主要介紹了JS使用onerror捕獲異常的方法,結(jié)合實(shí)例形式分析了javascript基于onerror事件處理器捕獲異常的具體流程與相關(guān)操作技巧,需要的朋友可以參考下2016-08-08