原生js實現簡潔的返回頂部元件

2022-02-02 23:53:09 字數 1544 閱讀 9458

本文內容相當簡單,所以沒有發布到首頁,如果你不幸看到,那只能是我這篇文章的榮幸,謝謝你的大駕光臨~(本部落格返回頂部的功能就使用的是這個元件)

由於思路跟**都很簡單,所以就直接貼出實現細節了:

var backtop = function

(dome,distance) ,100);

dome.onclick = function

();

function

toggledome()

function

throttle(func, wait) , wait);}}

};

呼叫方式:

<

script

>

newbacktop(document.getelementbyid(

'backtop'))

script

>

之所以寫這篇部落格,弄這麼個簡單的東西,有兩個方面的原因:

1)這段時間一直在手寫一些常見的簡單元件,這算是乙個簡單中更簡單的乙個,為了讓這系列的部落格更加完整,所以把這個元件補充了進來;

2)我想表達自己在工作過程中的乙個觀點:就是不要過渡用使用者體驗來裝飾你的軟體或者說產品,使用者體驗這個東西說白了就是兩個詞,乙個是好印象,第二個就是好玩,但這並不是產品開發運營的最終目的,你把東西做的再漂亮,產品的核心價值和服務做的不夠的話,就算把返回頂部這種功能做成超級無敵的火箭也是徒勞無功的。做前端開發,得鍛鍊點控制產品經理瞎提使用者體驗功能的度,以這個元件來說,我認為做加速或減速效果都是多餘的,既增加開發時間,又耽誤使用者使用的時間,拋棄自己心中那點對技術玩弄的固執,可以讓自己的工作做的更加完美。

最後,還是非常感謝你把它看完:)

補充於2016-03-16

var backtop = function

(dome, distance) ;

} else

if (typeof el.attachevent === 'function') ;

} else

; };

}addlistener(dome, type, fn);

}addlistener(window, 'scroll', throttle(function

() , 100));

addlistener(dome, 'click', function

() )

function

toggledome()

function

throttle(func, wait) , wait);}}

};

補充於2016-03-18

以上**中有一處可以進一步簡化:

可以改成:

addlistener(dome, 'click', function

() );

原生JS實現返回頂部功能

當你點選 返回頂部 按鈕,頁面會自動滾動到頂部,這種做法被許多 採用 之前我用jquery實現了返回頂部功能 見jquery實現鏈結 並在許多專案中使用了這個jquery版本實現。但最近我將注意力轉向了 效能方面,試圖提高頁面的載入速度。其中最大的改進便是移除了jquery依賴改用原生js實現 返回...

js實現返回頂部功能的解決方案

很多 上都有返回頂部的效果,主要有如下幾種解決方案。window.scrollto x coord,y coord window.scrollto 0,0 生硬版 var scrolltotop window.setinterval function else 16 how fast to scro...

用js實現簡單的點選返回頂部效果

當頁面特別長的時候,使用者想回到頁面頂部,必須得滾動好幾次滾動鍵才能回到頂部,如果在頁面右下角有個 返回頂部 的按鈕,使用者點選一下,就可以回到頂部,對於使用者來說,是乙個比較好的體驗。實現原理 當頁面載入的時候,把元素定位到頁面的右下角,當頁面滾動時,元素一直位於右下角,當使用者點選的時候,頁面回...