“返回頂部”按鈕制作方法
2018-11-01 來源：學(xué)做網(wǎng)站論壇
我們自己做網(wǎng)站時(shí)，如果網(wǎng)頁的版面很長，用戶瀏覽到網(wǎng)頁底部時(shí)，返回頂部需要通過拉動滾動條。為了讓用戶更輕松返回頂部，我們可以在自己網(wǎng)站上制作一個(gè)“返回頂部”按鈕。
“返回頂部”按鈕功能需要二部分代碼：
HTML代碼：
<div class="kfxt">
<ul>
<li class="sidebar-a" id="sidebar-a"><a href="javascript:;">在線咨詢</a></li>
<li class="sidebar-b" id="sidebar-b"><a href="javascript:;">4008888888</a></li>
<li class="sidebar-c" id="sidebar-c"><a href="javascript:;">返回頂部</a></li>
</ul>
</div>
<ul>
<li class="sidebar-a" id="sidebar-a"><a href="javascript:;">在線咨詢</a></li>
<li class="sidebar-b" id="sidebar-b"><a href="javascript:;">4008888888</a></li>
<li class="sidebar-c" id="sidebar-c"><a href="javascript:;">返回頂部</a></li>
</ul>
</div>
JS代碼：
<script>
//返回頂部代碼
$("#sidebar-c").click(function () {
$('html,body').animate({scrollTop: 0}, 300);
return false;
});
</script>
//返回頂部代碼
$("#sidebar-c").click(function () {
$('html,body').animate({scrollTop: 0}, 300);
return false;
});
</script>
CSS代碼：
.kfxt{
background: #000;
? opacity: 0.5;
position:fixed;
bottom:5%;
? right: 0;
? width: 160px;
? height: 163px;
? z-index: 100;
}
.kfxt li a{
display:block;
padding-left: 56px;
? height: 50px;
? background: url(images/sidebar-icon.png) no-repeat;
? font-size: 14px;
? line-height: 50px;
? color: #FFF;
}
.kfxt .sidebar-a a { top:0; background-position:0 0;}
.kfxt .sidebar-b a { top:50px; width:100px; background-position:0 -50px;}
.kfxt .sidebar-c a { top:100px; background-position:0 -100px;}
background: #000;
? opacity: 0.5;
position:fixed;
bottom:5%;
? right: 0;
? width: 160px;
? height: 163px;
? z-index: 100;
}
.kfxt li a{
display:block;
padding-left: 56px;
? height: 50px;
? background: url(images/sidebar-icon.png) no-repeat;
? font-size: 14px;
? line-height: 50px;
? color: #FFF;
}
.kfxt .sidebar-a a { top:0; background-position:0 0;}
.kfxt .sidebar-b a { top:50px; width:100px; background-position:0 -50px;}
.kfxt .sidebar-c a { top:100px; background-position:0 -100px;}
版權(quán)申明：本站文章部分自網(wǎng)絡(luò)，如有侵權(quán)，請聯(lián)系：west999com@outlook.com
特別注意：本站所有轉(zhuǎn)載文章言論不代表本站觀點(diǎn)！
本站所提供的圖片等素材，版權(quán)歸原作者所有，如需使用，請與原作者聯(lián)系。
下一篇:網(wǎng)頁制作初級入門教程
最新資訊
熱門推薦