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

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

WBOY
發布: 2016-05-16 15:49:14
原創
1646 人瀏覽過

只修改了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;
}

相關標籤:
來源:php.cn
本網站聲明
本文內容由網友自願投稿,版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容,請聯絡admin@php.cn
熱門教學
更多>
最新下載
更多>
網站特效
網站源碼
網站素材
前端模板