今天就跟大家聊聊有關(guān)JavaScript中怎么實現(xiàn)返回到頂部效果，可能很多人都不太了解，為了讓大家更加了解，小編給大家總結(jié)了以下內(nèi)容，希望大家根據(jù)這篇文章可以有所收獲。

成都創(chuàng)新互聯(lián)是一家專注于網(wǎng)站建設(shè)、成都網(wǎng)站設(shè)計與策劃設(shè)計,犍為網(wǎng)站建設(shè)哪家好?成都創(chuàng)新互聯(lián)做網(wǎng)站,專注于網(wǎng)站建設(shè)十余年,網(wǎng)設(shè)計領(lǐng)域的專業(yè)建站公司;建站業(yè)務(wù)涵蓋:犍為等地區(qū)。犍為做網(wǎng)站價格咨詢:028-86922220

回到頁面頂部實現(xiàn)功能：

當頁面加載的時候，把返回頂部按鈕定位到頁面的右下角，當頁面從頂部向下滑動不超過一定距離時，返回頂部按鈕隱藏，當頁面從頂部向下滑動超過該距離時，返回頂部按鈕顯示，當用戶點擊返回頂部按鈕的時候，頁面返回頂部。

回到頁面頂部主要的幾種實現(xiàn)方案

1、純js,無動畫版本

window.scrollTo(x-coord,y-coord);
　　window.scrollTo(0,0);

2、純js，帶動畫版本

生硬版：

varscrollToTop=window.setInterval(function(){
　　varpos=window.pageYOffset;
　　if(pos>0){
　　window.scrollTo(0,pos-20);//howfartoscrolloneachstep
　　}else{
　　window.clearInterval(scrollToTop);
　　}
　　},16);//howfasttoscroll(thisequalsroughly60fps)

流暢版：

(functionsmoothscroll(){
　　varcurrentScroll=document.documentElement.scrollTop||document.body.scrollTop;
　　if(currentScroll>0){
　　window.requestAnimationFrame(smoothscroll);
　　window.scrollTo(0,currentScroll-(currentScroll/5));
　　}
　　})();

看完上述內(nèi)容，你們對JavaScript中怎么實現(xiàn)返回到頂部效果有進一步的了解嗎？如果還想了解更多知識或者相關(guān)內(nèi)容，請關(guān)注創(chuàng)新互聯(lián)行業(yè)資訊頻道，感謝大家的支持。

分享標題：JavaScript中怎么實現(xiàn)返回到頂部效果-創(chuàng)新互聯(lián)
標題來源：http://weahome.cn/article/dhgjod.html