“返回頂部”按鈕是用于網(wǎng)站版面過長(zhǎng)時(shí)，用戶點(diǎn)擊后直接拉到網(wǎng)站的頂部，可以節(jié)省網(wǎng)站用戶拖動(dòng)的時(shí)間。

今天學(xué)做網(wǎng)站論壇教大家制作“返回頂部”按鈕，它可以自動(dòng)判斷用戶所處的網(wǎng)頁(yè)的位置，如果在頂部，則不顯示“返回頂部”按鈕，如果不在頂部，則顯示出“返回頂部”按鈕。如下圖：

方法/步驟

1. 在HTML頁(yè)面底部添加以下的代碼，用于顯示一個(gè)“返回頂部”按鈕�！救绻�你不懂HTML，可以學(xué)習(xí)一下html入門教程】

   
   <div id="goTopBtn"><span class="glyphicon glyphicon-chevron-up">&Delta;</span></div>
   
   

2. 在CSS樣式中添加以下的CSS代碼，用于控制“返回頂部”按鈕的樣式�！救绻�不懂CSS，可以學(xué)習(xí)一下CSS視頻教程】

   
   #goTopBtn {position: fixed;line-height: 46px;text-align: center;width: 46px;bottom: 35px;height: 46px;cursor: pointer;background: #fff;display: none;border-radius: 6px;box-shadow: 0 0 8px rgba(0, 0, 0, 0.13);font-size:22px;color:#999;}
   
   

3. 在網(wǎng)頁(yè)的底部放上以下的jquery代碼，用于控制“返回頂部”按鈕什么時(shí)候顯示，什么時(shí)候隱藏。

   
   <script src="http://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js"></script>
   
   ?   <script>
   
   /*返回頂部*/
   
   $(window).scroll(function(){
   
   ?  var sc=$(window).scrollTop();
   
   ?  var rwidth=$(window).width()
   
   ?  if(sc>0){
   
   ?   $("#goTopBtn").css("display","block");
   
   ?   $("#goTopBtn").css("left",(rwidth-36)+"px")
   
   ?  }else{
   
   ?  $("#goTopBtn").css("display","none");
   
   ?  }
   
   ?})
   
   ?$("#goTopBtn").click(function(){
   
   ?  var sc=$(window).scrollTop();
   
   ?  $('body,html').animate({scrollTop:0},500);
   
   ?})
   
   ?  </script>
   
   

通過放上以上三段代碼，就可以在自己建網(wǎng)站時(shí)，制作出“返回頂部”按鈕了。如果覺得按鈕圖標(biāo)不好看，可以自己去下載一個(gè)“向上”的圖標(biāo)進(jìn)行替換�；蛘邔W(xué)習(xí)我們的零基礎(chǔ)建站培訓(xùn)課程，制作出更多網(wǎng)站功能。

標(biāo)簽： isp 代碼 建網(wǎng)站 建站

版權(quán)申明：本站文章部分自網(wǎng)絡(luò)，如有侵權(quán)，請(qǐng)聯(lián)系：west999com@outlook.com
特別注意：本站所有轉(zhuǎn)載文章言論不代表本站觀點(diǎn)！
本站所提供的圖片等素材，版權(quán)歸原作者所有，如需使用，請(qǐng)與原作者聯(lián)系。