“返回顶部”缓冲按钮制作方法
我们自己做网站时，如果网页的版面很长，用户浏览到网页底部时，返回顶部需要通过拉动滚动条。为了让用户更轻松返回顶部，我们可以在自己网站上制作一个“返回顶部”按钮。
“返回顶部”按钮功能需要二部分代码：
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;}
