今天介绍一个返回顶部代码,对用户体验比较好,很多大型网站都有这功能。当用户浏览页面时根据浏览器窗口下拉判断,并且右下角显示返回顶部图标按键。具体效果请看 游子网络 右边底部。
返回顶部按钮代码:此“返回顶部按钮”特点:
1、自动隐藏,页面滚动到一定距离显示。
2、返回按钮图片可自定义。
3、兼容常用浏览器。
返回顶部代码 自动判断浏览器窗口 自动隐藏:
CSS部分,这里提供两个图标颜色,一个是灰色,一个是草绿色。把CSS代码加到CSS文件的底部。
草绿色
#toTop {
width:50px;
height:50px;
background:#fff url(http://www.oleou.com/images/lvse.gif);
position:fixed;
left: 50%;
margin-left: 510px;
bottom:50px;
cursor:pointer; 内容来自oleou.com
display:none;
}灰色
#toTop {
width:50px;
height:50px;
background:#fff url(http://www.oleou.com/images/huise.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(); www.oleou.com
}
});
$('#toTop').click(function() {
$('body,html').animate({scrollTop:0},500);
});
});
</script>
OK,记得清理一下浏览器缓存,不要因为浏览器缓存导致看不到效果。如有疑问请留言,一般不会有什么问题的。
升级版本:————————————————————————————————————————下面这种效果貌似更好,根据自己喜欢选择。
CSS代码:灰色有提示效果:
/*返回顶部*/
.btn_top,.btn_top a{width:69px;height:81px;overflow:hidden;}
o l e o u.com
友情赞助 | TAG标签 | baidumap | sitemap | RSS订阅 | 登陆邮箱 | 站内搜 |
Copyright ©copy; 2018 OLEOU 欢迎转载、评论。联系站长admin@oleou.com 港ICP备20120818号-1