主頁 > 知識(shí)庫 > 仿CSDN Blog返回頁面頂部功能實(shí)現(xiàn)原理及代碼

仿CSDN Blog返回頁面頂部功能實(shí)現(xiàn)原理及代碼

熱門標(biāo)簽:怎么做百度地圖標(biāo)注 地圖標(biāo)注柱狀圖 咸陽穩(wěn)定外呼系統(tǒng)軟件 小朱地圖標(biāo)注 臨海地圖標(biāo)注app 四川移動(dòng)電銷外呼客戶管理系統(tǒng) 百度地圖標(biāo)注為什么總是封號(hào) 智能芯電話機(jī)器人 400開頭的電話好申請(qǐng)不
只修改了2個(gè)地方:
,返回的速度-->改成了慢慢回去。(原來是一閃而返回)
,返回頂部圖標(biāo)出現(xiàn)的時(shí)機(jī)-->改成了只要不在頂部就顯示出來。(原來是向下滾動(dòng)500px后才顯示)

注意:JS務(wù)必要寫在 Html之后;
HTML

復(fù)制代碼
代碼如下:

<div id="d-top" style="display:none;">
<a id="d-top-a" href="#" title="回到頂部">
<img src="http://static.blog.csdn.net/images/top.png" alt="TOP" /></a>
</div>

Javascript代碼

復(fù)制代碼
代碼如下:

<script type="text/javascript">
$(function(){
var d_top=$('#d-top');
document.onscroll=function(){
var scrTop=(document.body.scrollTop||document.documentElement.scrollTop);
if(scrTop>500){
if(scrTop>0){
d_top.show();
}else{
d_top.hide();
}
}
$('#d-top-a').click(function(){
$("html,body").animate({scrollTop: 0},500);
//scrollTo(0,0);
this.blur();
return false;
});
});
</script>

CSS樣式

復(fù)制代碼
代碼如下:

#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;
}

標(biāo)簽:黃石 陜西 平頂山 山南 公主嶺 黃石 南平

巨人網(wǎng)絡(luò)通訊聲明:本文標(biāo)題《仿CSDN Blog返回頁面頂部功能實(shí)現(xiàn)原理及代碼》,本文關(guān)鍵詞  仿,CSDN,Blog,返回,頁面,頂部,;如發(fā)現(xiàn)本文內(nèi)容存在版權(quán)問題,煩請(qǐng)?zhí)峁┫嚓P(guān)信息告之我們,我們將及時(shí)溝通與處理。本站內(nèi)容系統(tǒng)采集于網(wǎng)絡(luò),涉及言論、版權(quán)與本站無關(guān)。
  • 相關(guān)文章
  • 下面列出與本文章《仿CSDN Blog返回頁面頂部功能實(shí)現(xiàn)原理及代碼》相關(guān)的同類信息!
  • 本頁收集關(guān)于仿CSDN Blog返回頁面頂部功能實(shí)現(xiàn)原理及代碼的相關(guān)信息資訊供網(wǎng)民參考!
  • 推薦文章