jQuery实现的返回顶部功能
<title>jQuery实现的返回顶部功能</title>
<style>
body {height:2000px;}
#gotoTop{
display:none;
position:fixed;
top:75%;
left:50%;
cursor:pointer;
margin-top:-50px;
margin-left:520px;
width: 64px;
height:64px;
line-height: 100;
overflow: hidden;
background: url(/uploads/allimg/140902/1_1111215171.png) no-repeat;
}
#gotoTop{
_position:absolute;
_top:expression_r(documentElement.scrollTop + documentElement.clientHeight * 3/4 + "px");
}
</style>
<script src="http://libs.baidu.com/jquery/1.9.0/jquery.js"></script>
<script>
var min_height = 500;
$(function(){
$(window).scroll(function(){
//当窗口的滚动条的垂直位置大于页面的最小高度时,让返回顶部元素渐现,否则渐隐
if($(window).scrollTop() > min_height){
$("#gotoTop").fadeIn(100);
}else{
$("#gotoTop").fadeOut(200);
}
});
$("#gotoTop").click(function(){
$('html,body').animate({scrollTop:0},200);
});
});
</script>
<p>将滚动条拖到底部</p>
<div id="gotoTop" class="hover">返回顶部</div>
相关文章
- 医疗网站常用的左右滑动Banner效果_jquery插件
医疗网站常用的左右滑动Banner效果_jquery插件,使用简单。 在线演示 使用方法: 1.在网页中引入一下代码: 复制代码 代码如下: link href=css/slide.css rel=stylesheet type=text/css / script type=text/javascript src=js/jquery.js/script script type=
- Jquery幻灯片特效jquery.KinSlideshow-1.1.js
KinSlideshow无缝滑动幻灯片jquery特效代码Jquery幻灯片特效jquery.KinSlideshow-1.1.js 兼容IE6/IE7/IE8/IE9,FireFox,Chrome*,Opera的 jQuery. KinSlideshow幻灯片插件,功能很多 ,基本能满足你在网页上使用幻灯片(焦点图)效果。 演示页面: 演示一 演示二
- 调用百度CDN提供的jQuery库来加速网站
CDN公共库是指将常用的JS库存放在CDN节点,以方便广大开发者直接调用。与将JS库存放在服务器单机上相比,CDN公共库更加稳定、高速。 百度公共CDN为您的应用程序提供稳定、可靠、高速的服务,包含全球所有最流行的开源JavaScript库。 使用方法: 加载JS库,复
- jQuery日期选择器插件jquery.date_input.js
官网: http://jonathanleighton.com/projects/date-input/ 下载: http://ajax.googleapis.com/ajax/libs/jquery/1.3.1/jquery.min.js http://github.com/jonleighton/date_input/raw/master/jquery.date_input.js http://github.com/jonleighton/date_inpu
- jQuery火箭上升回到顶部效果
jQuery火箭上升回到顶部效果,jQuery模拟火箭升空的效果使网页回到顶部,效果逼真。 代码打包下载: jQuery火箭上升回到顶部效果 效果截图:
随机推荐
- 医疗网站常用的左右滑动Banner效果_jquery插件
医疗网站常用的左右滑动Banner效果_jquery插件,使用简单。 在线演示 使用方法: 1.在网页中引入一下代码: 复制代码 代码如下: link href=css/slide.css rel=stylesheet type=text/css / script type=text/javascript src=js/jquery.js/script script type=
- Jquery幻灯片特效jquery.KinSlideshow-1.1.js
KinSlideshow无缝滑动幻灯片jquery特效代码Jquery幻灯片特效jquery.KinSlideshow-1.1.js 兼容IE6/IE7/IE8/IE9,FireFox,Chrome*,Opera的 jQuery. KinSlideshow幻灯片插件,功能很多 ,基本能满足你在网页上使用幻灯片(焦点图)效果。 演示页面: 演示一 演示二
- 调用百度CDN提供的jQuery库来加速网站
CDN公共库是指将常用的JS库存放在CDN节点,以方便广大开发者直接调用。与将JS库存放在服务器单机上相比,CDN公共库更加稳定、高速。 百度公共CDN为您的应用程序提供稳定、可靠、高速的服务,包含全球所有最流行的开源JavaScript库。 使用方法: 加载JS库,复
- jQuery日期选择器插件jquery.date_input.js
官网: http://jonathanleighton.com/projects/date-input/ 下载: http://ajax.googleapis.com/ajax/libs/jquery/1.3.1/jquery.min.js http://github.com/jonleighton/date_input/raw/master/jquery.date_input.js http://github.com/jonleighton/date_inpu
- jQuery火箭上升回到顶部效果
jQuery火箭上升回到顶部效果,jQuery模拟火箭升空的效果使网页回到顶部,效果逼真。 代码打包下载: jQuery火箭上升回到顶部效果 效果截图: