“返回顶部”按钮制作方法
2018-11-01 来源：学做网站论坛
我们自己做网站时，如果网页的版面很长，用户浏览到网页底部时，返回顶部需要通过拉动滚动条。为了让用户更轻松返回顶部，我们可以在自己网站上制作一个“返回顶部”按钮。
“返回顶部”按钮功能需要二部分代码：
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;}
版权申明：本站文章部分自网络，如有侵权，请联系：west999com@outlook.com
特别注意：本站所有转载文章言论不代表本站观点！
本站所提供的图片等素材，版权归原作者所有，如需使用，请与原作者联系。
上一篇:建网站需要了解哪些知识
下一篇:网页制作初级入门教程
最新资讯
热门推荐