原生JS實現返回頂部功能

2022-08-16 08:45:08 字數 810 閱讀 4133

當你點選「返回頂部」按鈕,頁面會自動滾動到頂部,這種做法被許多**採用 。

之前我用jquery實現了返回頂部功能(見jquery實現鏈結),並在許多專案中使用了這個jquery版本實現。

但最近我將注意力轉向了**效能方面,試圖提高頁面的載入速度。其中最大的改進便是移除了jquery依賴改用原生js實現「返回頂部」效果。

我並不是說絕對不能使用 jquery,而是假使你所處理的一些點選事件用原生js就可解決 ,為什麼還要用jquery?因此我回頭閱讀了之前的jquery返回頂部功能函式,用原生js實現了同樣的效果。

首先頁面上要有使用者可點選的元素,像按鈕,div,span元素都可以,然後向該元素新增乙個點選事件。

back to top  ^

點選該元素,「回到頂部」函式就會開始執行。

我們首先希望頁面能滾動回頂部,然後是控制滾動,讓頁面的滾動效果看起來像使用者在自然滾動。

第一步,我們要檢查目前是否處於頁面頂部,如果不是則執行下一步。

if (document.body.scrolltop!=0||document.documentelement.scrolltop!=0)

下一步是將頁面向上滾動一段距離(這裡設為50px)。

window.scrollby(0,-50);

在向上滾動50px後,我們需要定時執行這個滾動操作(設為每10毫秒執行一次)。

現在我們就能看到類似自然滾動的效果,頁面滾動到頂部,之後滾動停止。

注:本文為譯文。

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

本文內容相當簡單,所以沒有發布到首頁,如果你不幸看到,那只能是我這篇文章的榮幸,謝謝你的大駕光臨 本部落格返回頂部的功能就使用的是這個元件 由於思路跟 都很簡單,所以就直接貼出實現細節了 var backtop function dome,distance 100 dome.onclick func...

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

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

返回頂部 js

返回頂部 1.可以在網頁新增錨鏈結 2.利用js 可以實現動畫效果 test test test test test test test test test test test test test test test test test test test test test test test t...