为网站增加返回顶部按钮

Joe  于  2014-02-20 17:26:36  发布至  编程相关  累计    次阅读

在平常的网站浏览中,可能会遇到一些文章比较长的页面,有时候想要返回顶部需要用鼠标一直拉着,我们可以为网站增加一个返回顶部的图片,只需要轻轻一点便可回到顶部,方便而又有利于提高用户体验,只需要三步便可以实现,步骤如下:

第一步:div与js代码,把下面这句放在body结束前

<!-- 返回顶部 -->
<div id="toTop"></div>
<script type="text/javascript">
$(function() {
$(window).scroll(function() {
if($(this).scrollTop() != 0) {
$('#toTop').fadeIn();
} else {
$('#toTop').fadeOut();
}
});
$('#toTop').click(function() {
$('body,html').animate({scrollTop:0},500);
});
});
</script>

第二步:下面这部分代码是css样式,放入style.css文件中即可(可以根据自己的主题修改left的百分比,或是bottom的值,移动返回顶部的位置)

/***************返回顶部**************/
 #toTop {
width:50px;
height:50px;
background:#fff url(images/top.png);
position:fixed;
left: 55%;
margin-left: 510px;
bottom:65px;
cursor:pointer;
display:none;

第三步:下面是两种风格的返回顶部图片,选择你喜欢的一种放入主题images文件夹中即可,把图片名字改为top.png

上一篇:如何修改element.style样式下一篇:百度喜欢后分享