好久没更新博客了惭愧惭愧,向常来串门的童鞋们说声抱歉。有时间就更新吧,博客就是这样。
今天介绍一个返回顶部代码,对用户体验比较好,很多大型网站都有这功能。当用户浏览页面时根据浏览器窗口下拉判断,并且右下角显示返回顶部图标按键。具体效果请看 游子网络 右边底部。
返回顶部按钮代码:此“返回顶部按钮”特点:
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>
游子搜集整理,转载请注明原处谢谢!
现在这个功能挺多博客都在用的!挺实用的按钮!
是对!用户体验会好一点!
颜色只是个样式,最重要的是功能。
朋友你好,我是你的友链“龙的传人”,请将我的链接名称由“龙的传人”改为“小林博客”。打扰了,谢谢~
刷新!