jQuery实现的返回顶部功能

模板网 2014-09-02
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>

相关文章

  1. 很棒的网站底部导航条效果

    很棒的网站底部导航条效果,访客输入咨询信息点击发送按钮时可以向商务通传递访客输入的信息。 打包下载: 很棒的网站底部导航条效果 效果截图:

  2. 医疗网站常用的左右滑动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=

  3. jQuery集合多种过渡效果幻灯片插件jQuery Nivo Slider v2.5.1

    好吧一直有人抱怨js版本的焦点图过渡效果太单调,今天介绍的这款jQuery插件Nivo Slider,除了一般该有的参数设置外,最大的亮点就是其集成了16种(v2.5.1)过渡效果 ,再加上对CSS的调整,效果相信已经可以和很多Flash版本的焦点图相媲美了 插件同时还支持缩略

  4. Jquery幻灯片特效jquery.KinSlideshow-1.1.js

    KinSlideshow无缝滑动幻灯片jquery特效代码Jquery幻灯片特效jquery.KinSlideshow-1.1.js 兼容IE6/IE7/IE8/IE9,FireFox,Chrome*,Opera的 jQuery. KinSlideshow幻灯片插件,功能很多 ,基本能满足你在网页上使用幻灯片(焦点图)效果。 演示页面: 演示一 演示二

  5. jquery折叠效果

    jquery折叠效果,图片折叠收缩,效果非常棒! 代码打包下载: jquery折叠效果 效果图:

随机推荐

  1. 很棒的网站底部导航条效果

    很棒的网站底部导航条效果,访客输入咨询信息点击发送按钮时可以向商务通传递访客输入的信息。 打包下载: 很棒的网站底部导航条效果 效果截图:

  2. 医疗网站常用的左右滑动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=

  3. jQuery集合多种过渡效果幻灯片插件jQuery Nivo Slider v2.5.1

    好吧一直有人抱怨js版本的焦点图过渡效果太单调,今天介绍的这款jQuery插件Nivo Slider,除了一般该有的参数设置外,最大的亮点就是其集成了16种(v2.5.1)过渡效果 ,再加上对CSS的调整,效果相信已经可以和很多Flash版本的焦点图相媲美了 插件同时还支持缩略

  4. Jquery幻灯片特效jquery.KinSlideshow-1.1.js

    KinSlideshow无缝滑动幻灯片jquery特效代码Jquery幻灯片特效jquery.KinSlideshow-1.1.js 兼容IE6/IE7/IE8/IE9,FireFox,Chrome*,Opera的 jQuery. KinSlideshow幻灯片插件,功能很多 ,基本能满足你在网页上使用幻灯片(焦点图)效果。 演示页面: 演示一 演示二

  5. jquery折叠效果

    jquery折叠效果,图片折叠收缩,效果非常棒! 代码打包下载: jquery折叠效果 效果图: