前端 css js實現返回頂部功能

2022-07-04 06:03:07 字數 517 閱讀 9676

描述:

本文主要是講,通過css+js實現網頁中的【返回頂部】功能。

實現**:

html:

12"

returntop()

" id="

btntop

" title="返回

頂部">返回頂部

3

css:

1

/*return top */2

#btntop

16#btntop:hover

js:

1

//當網頁向下滑動 20px 出現"返回頂部" 按鈕

2 window.onscroll =function() ;56

function scrollfunction() else13}

1415

//點選按鈕,返回頂部

16function returntop()

使用jQuery實現返回頂部功能

p id back to top a href top span span 返回頂部 a p 其中a標籤指向錨點top,可以在頂部防止乙個的錨點,這樣在瀏覽器不支援js時也可以實現返回頂部的效果了。returntop p back to topp back to top ap back to top...

原生JS實現返回頂部功能

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

實現完成返回頂部

測試測試 測試測試 測試測試 測試測試 測試測試 測試測試 測試測試 測試測試 測試測試 測試測試 測試測試 測試測試 測試測試 測試測試 測試測試 測試測試 測試測試 測試測試 測試測試 測試測試 測試測試 測試測試 測試測試 測試測試 測試測試 測試測試 測試測試 測試測試 測試測試 測試測試 ...