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

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

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

返回顶部按钮代码:此“返回顶部按钮”特点:
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>

游子搜集整理,转载请注明原处谢谢!

最后编辑于:2013/1/19作者: 游子

热爱一切美好的新事物,搞网站也被网站搞,剁手折腾。关注与学习Web相关技术与UI\UE\UED\UCD\Server相关知识,服务器运维、前端、后端、非专业程序猿、非高级前端后端攻城师!

5 条评论

发表评论

电子邮件地址不会被公开。 必填项已用*标注

arrow grin ! ? cool roll eek evil razz mrgreen smile oops lol mad twisted wink idea cry shock neutral sad ???

  1. 梦轩丽人说道:
    3#

    现在这个功能挺多博客都在用的!挺实用的按钮!

    • 游子说道:

      是对!用户体验会好一点!

  2. wmtimes说道:
    2#

    颜色只是个样式,最重要的是功能。

  3. 小林博客说道:
    1#

    朋友你好,我是你的友链“龙的传人”,请将我的链接名称由“龙的传人”改为“小林博客”。打扰了,谢谢~