首頁 >web前端 >H5教程 >仿CSDN Blog返回頁面頂部功能實現原理及程式碼_html5教學技巧

仿CSDN Blog返回頁面頂部功能實現原理及程式碼_html5教學技巧

WBOY
WBOY原創
2016-05-16 15:49:141665瀏覽

只修改了2個地方:
,返回的速度-->改成了慢慢回去。 (原來是一閃而返回)
,回到頂部圖示出現的時機-->改成了只要不在頂部就顯示出來。 (原來是向下滾動500px後才顯示)

注意:JS務必寫在Html之後;
HTML

複製程式碼
程式碼如下:



Javascript代碼

複製程式碼
程式碼如下:



CSS樣式
複製程式碼
程式碼如下:


#d-top {
position: fixed; >float: right;
z-index: 10;
right: 10px;
bottom: 40px;
}
#d-top img {
width: 42px; >opacity: 0.3;
}
img {
border: medium none;
}

陳述:
本文內容由網友自願投稿,版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容,請聯絡admin@php.cn