返回頂部的幾種方法

有時候網(wǎng)頁太長,我們想要回到網(wǎng)頁頂部很麻煩。

這時候我們需要一個返回頂部的效果。

要實現(xiàn)返回頂部,有很多方法。

1.使用HTML的錨標記是最簡單的方法。

但是缺點是樣式不好看

例子:<a href="top" id='top'></a>?標簽只要靠近頂部就行

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

2.使用Scroll函數(shù)返回頂部

scrooll函數(shù)用來控制滾動條的位置,有兩種很簡單的實現(xiàn)方式:

(1):

返回頂部

scroll第一個參數(shù)是水平位置,第二個參數(shù)是垂直位置,比如要想定位在垂直520像素處,改成scroll(0,520)就可以了。

(2)緩慢向上:

這個方法是漸進式的返回頂部,比上一種好看一些:

例子:

functionpageScroll() {window.scrollBy(0,-10);scrolldelay=setTimeout('pageScroll()',100);}

<a href="pageScroll()">返回頂部</a>

這樣就會動態(tài)返回頂部,只不過雖返回頂部但是代碼仍在運行,還需要停止掉

if(document.documentElement.scrollTop==0)clearTimeout(scrolldelay)

3.用JQuery動畫來實現(xiàn)

這里用到了jquery的自定義動畫來實現(xiàn)功能

$('html, body').animate({ scrollTop: 0 },'fast')

4.不用動畫的jQuery

例子:

$('html,body').scrollTop(0);

5.純js 無動畫版本

window.scrollTo(0,0)

6.純js 動畫版本

生硬版:

varscrollToTop=window.setInterval(function() {

varpos=window.pageYOffset;

if?(?pos>0?)?{

window.scrollTo(?0,?pos?-?20?);?//?how?far?to?scroll?on?each?step

}?else?{

window.clearInterval(?scrollToTop?);

}

},?16);?//?how?fast?to?scroll?(this?equals?roughly?60?fps)

流暢版:

(function smoothscroll(){

varcurrentScroll=document.documentElement.scrollTop?||?document.body.scrollTop;

if?(currentScroll>0)?{

window.requestAnimationFrame(smoothscroll);

window.scrollTo?(0,currentScroll?-?(currentScroll/5));

}

})();

最后編輯于
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請聯(lián)系作者
【社區(qū)內(nèi)容提示】社區(qū)部分內(nèi)容疑似由AI輔助生成,瀏覽時請結(jié)合常識與多方信息審慎甄別。
平臺聲明:文章內(nèi)容(如有圖片或視頻亦包括在內(nèi))由作者上傳并發(fā)布,文章內(nèi)容僅代表作者本人觀點,簡書系信息發(fā)布平臺,僅提供信息存儲服務(wù)。

相關(guān)閱讀更多精彩內(nèi)容

  • Window和document對象的區(qū)別 window對象window對象表示瀏覽器中打開的窗口window對象是...
    FConfidence閱讀 2,365評論 0 5
  • offset家族三大家族和一個事件對象三大家族(offset/scroll/client)事件對象/event ...
    Yuann閱讀 1,087評論 0 5
  • 本文是針對剛學(xué)編程的小白,都是一些基礎(chǔ)知識,如果想了解更多深層一點的東西,歡迎移步本人博客!! 博客地址 點擊跳轉(zhuǎn)...
    西巴擼閱讀 735評論 0 2
  • 清晨依舊煙雨蒙蒙,古城西安已經(jīng)連續(xù)下雨一周了,據(jù)天氣預(yù)報還要再下一周,氣溫下降了十幾度,真乃“秋風(fēng)秋雨愁煞人,寒宵...
    絲美天下閱讀 617評論 0 0
  • 上世紀九十年代,由科技部(原國家科委)推動的高新技術(shù)開發(fā)區(qū)開始,中國的經(jīng)濟技術(shù)開發(fā)區(qū)緊跟其后,進而逐步發(fā)展出各類地...
    計靜怡閱讀 352評論 0 0

友情鏈接更多精彩內(nèi)容