返回顶部效果jquery(位置兼容IE6)
2013-06-27 10:25
507 查看
返回顶部效果,可时间控制向上移的速度,废话不说,直接贴代码:
HTML:
CSS:
JQUERY:
$(function(){
$(".backtop").hide();
$(function() {
$(window).scroll(function() {
if ($(window).scrollTop() > 200) {
$(".backtop").show()
}
else{
$(".backtop").hide()
}
});
$(".backtop").click(function() {
$('body,html').animate({ scrollTop: 0 }, 500);
return false;
});
});
});
HTML:
<div class="backtop"><img src="../css.87504.cn/images/business/backtop.gif" /></div>
CSS:
.backtop{ position:fixed; cursor:pointer; top:80%; width:49px; height:50px; left:50%; margin-left:510px; _position:absolute; _top:expression(documentElement.scrollTop + documentElement.clientHeight * 4/5 + "px") }
JQUERY:
$(function(){
$(".backtop").hide();
$(function() {
$(window).scroll(function() {
if ($(window).scrollTop() > 200) {
$(".backtop").show()
}
else{
$(".backtop").hide()
}
});
$(".backtop").click(function() {
$('body,html').animate({ scrollTop: 0 }, 500);
return false;
});
});
});
相关文章推荐
- 基于jquery的返回顶部效果(兼容IE6)
- 基于jquery的返回顶部效果(兼容IE6)
- 【代码片段】jquery 回到顶部效果(全兼容浏览器)可自定义出现位置和页面宽度
- jquery编写兼容IE6的返回顶部功能
- 用jQuery实现的智能隐藏、滑动效果的返回顶部代码
- jquery实现返回顶部按钮和scroll滚动功能[带动画效果] 转载
- 一句jQuery代码实现返回顶部效果(简单实用)
- Jquery页面滚动条向下拉到div的位置时,此div就固定在顶部,向上拉时返回原位置
- jQuery&CSS 顶部和底部固定浮动工具栏 兼容IE6
- jquery左边浮动到一定位置显示返回顶部代码
- jQuery实现返回顶部按钮效果
- CSS3和jQuery实现花瓣网固定顶部位置悬浮菜单效果
- Jquery---用jQuery实现的智能隐藏、滑动效果的返回顶部代码
- JQuery 动画卷页 返回顶部 动画特效(兼容Chrome)
- JQuery 动画卷页 返回顶部 动画特效(兼容Chrome)
- 返回顶部链接效果--jQuery实现
- jQuery实现最简单的切换图效果【可兼容IE6、火狐、谷歌、opera等】
- jquery左边浮动到一定位置时显示返回顶部按钮
- jquery配合css简单实现返回顶部效果