零基础建站培训介绍

当前位置:

“返回顶部”按钮制作方法

我们自己做网站时,如果网页的版面很长,用户浏览到网页底部时,返回顶部需要通过拉动滚动条。为了让用户更轻松返回顶部,我们可以在自己网站上制作一个“返回顶部”按钮。

“返回顶部”按钮制作方法

“返回顶部”按钮功能需要二部分代码:

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>

JS代码:

<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;}
上一课: 下一课:

发表评论