JS 帶運動的返回頂部 小案例

2021-09-28 11:29:56 字數 1341 閱讀 5553

帶運動的返回頂部:當滾動條在滾動的時候,滾動滑鼠的滾輪,應該讓滾動條停止滾動,清掉定時器。下面的方法b 就是清掉的方法

>6.帶運動的返回頂部

title

>

8<

meta

name

="author"

content

="administrator"

/>910

<

style

>

11#gotop

12style

>

13<

script

>

14/*

*滾動條 帶運動返回頂部

15* 運動的值就是 滾動條距離文件頂部的距離,在定時器內獲取值

16* 速度 就是目標點(0-當前的scrolltop)/8

17* 滾動距離賦值的時候需要連等:

18* document.documentelement.scrolltop=document.body.scrolltop= icur +ispeed*

*/19

window.onload

=function

()26

27window.onscroll

=function

()32b=

233}34

35odiv.onclick

=function

()47

48},

30) 49}

50}51script

>

52head

>

53<

body

style

="height:2000px;"

>

54<

div

id="gotop"

>top

div>

55body

>

56html

>

view code

JS動畫之返回頂部案例

需求 一開始返回頂部圖示是隱藏的,當滾動到指定位置的時候,小圖示就會顯示出來,點選圖示,會緩動的返回頂部 技術點 window.scrollto x,y 瀏覽器顯示區域跳轉到指定的座標 我是最頂端.風吹馬尾千條線,雨打羊毛一片氈.風吹馬尾千條線,雨打羊毛一片氈.風吹馬尾千條線,雨打羊毛一片氈.風吹馬...

原生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...