为网站增加返回顶部按钮
Joe 于 2014-02-20 17:26:36 发布至 编程相关 累计 4530 次阅读
在平常的网站浏览中，可能会遇到一些文章比较长的页面，有时候想要返回顶部需要用鼠标一直拉着，我们可以为网站增加一个返回顶部的图片，只需要轻轻一点便可回到顶部，方便而又有利于提高用户体验，只需要三步便可以实现，步骤如下：
第一步：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
