返回顶部按钮代码 自动判断浏览器窗口 自动隐藏

好久没更新博客了惭愧惭愧，向常来串门的童鞋们说声抱歉。有时间就更新吧，博客就是这样。

今天介绍一个返回顶部代码，对用户体验比较好，很多大型网站都有这功能。当用户浏览页面时根据浏览器窗口下拉判断，并且右下角显示返回顶部图标按键。具体效果请看 游子网络 右边底部。

返回顶部按钮代码:此“返回顶部按钮”特点：
1、自动隐藏，页面滚动到一定距离显示。
2、返回按钮图片可自定义。
3、兼容常用浏览器。

返回顶部代码 自动判断浏览器窗口 自动隐藏：
CSS部分，这里提供两个图标颜色，一个是灰色，一个是草绿色。把CSS代码加到CSS文件的底部。
草绿色

#toTop {
width:50px;
height:50px;
background:#fff url(http://img01.taobaocdn.com/imgextra/i1/45631983/T26im4XkJaXXXXXXXX_!!45631983.gif);
position:fixed;
left: 50%;
margin-left: 510px;
bottom:50px;
cursor:pointer;
display:none;
}

灰色

#toTop {
width:50px;
height:50px;
background:#fff url(http://www.yziw.net/wp-includes/js/tinymce/plugins/wpeditimage/img/image.png);
position:fixed;
left: 50%;
margin-left: 510px;
bottom:50px;
cursor:pointer;
display:none;
}

CSS部分根据自己喜欢选择一种就行，不要两个一起添加，只需要添加其中一段。CSS添加后以后就在网页底部添加如下代码</body>的前面，例如WordPress程序，就找到主题模板 footer.php文件 添加如下代码：

<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>

OK，记得清理一下浏览器缓存，不要因为浏览器缓存导致看不到效果。如有疑问请留言，一般不会有什么问题的。

升级版本：下面这种效果貌似更好，根据自己喜欢选择。

CSS代码：灰色有提示效果：

/*返回顶部*/
.btn_top,.btn_top a{width:69px;height:81px;overflow:hidden;}
.btn_top{position:fixed;_position:absolute;/* for IE6 */_top:expression(documentElement.scrollTop + documentElement.clientHeight-this.offsetHeight-50);/*for IE6*/right:50px;bottom:50px;left:auto;display:inline-block;text-indent:-9999px;overflow:hidden;cursor:pointer;}
.btn_top a{display:block;background:url(http://img04.taobaocdn.com/imgextra/i4/45631983/T2EMS4XlBaXXXXXXXX_!!45631983.gif) 0 0 no-repeat;}
.btn_top a:hover{background-position:0 -85px;}

JS代码加在网页底部：

<div class="btn_top" style="display: none;"><a id="dynamic-to-top" href="javascript:;" target="_self" title="回到顶部">回到顶部</a></div>
<script type="text/javascript">
scrollTopRun = function(){
var scrollHeight = $(document).scrollTop();
var screenWidth = $(window).width();
if(screenWidth <= 1024 ){
$(".btn_top").hide();
}else{
if(scrollHeight > 1000){
$(".btn_top").show();
$(".btn_top").unbind();
$(".btn_top").bind("click",function(){
$('body,html').animate({ scrollTop: 0 }, 500);
});
}else{
$(".btn_top").hide();
}
}
setTimeout("scrollTopRun()",500);
};
scrollTopRun();
</script>

游子搜集整理，转载请注明原处谢谢！