jQuery 返回顶部

最新推荐文章于 2023-06-13 10:37:33 发布

许增强

最新推荐文章于 2023-06-13 10:37:33 发布

阅读量854

点赞数

分类专栏： jQuery & javaScript HTML & CSS

本文链接：https://blog.csdn.net/xuzengqiang2/article/details/43307363

版权

jQuery & javaScript 同时被 2 个专栏收录

44 篇文章 0 订阅

订阅专栏

HTML & CSS

35 篇文章 0 订阅

订阅专栏

比较简单的一个东西，记录下：

主要是监控$(window).scroll()事件。

jquery.top.js

/**
 * jQuery返回顶部
 * @author:xuzengqiang
 * @since :2015-1-30 14:45:59
**/ 
;(function($){
	jQuery.fn.backTop = function(options){
		var defaultOptions = {
				hideIndex:200, //隐藏的位置
				hideTimer:1000, //隐藏返回按钮所用时间
				backIndex:0, //移动的位置,默认返回顶部
				backTimer:500 //返回顶部所需时间
			};
		var settings = jQuery.extend(defaultOptions, options || {}),
			current = $(this);
		
		
		$(window).scroll(function(){
			var timer = settings.hideTimer;
			if($(this).scrollTop()>=settings.hideIndex){  
				current.fadeIn(timer);  
			} else {  
				current.fadeOut(timer);
			}     
    	}); 
		return this.each(function(){
			current.click(function(){
				$("body,html").stop(false,true).animate({scrollTop:settings.backIndex},settings.backTimer);				
			});
		});
	};
})(jQuery);

调用例子：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>无标题文档</title>
<style type="text/css">
	*{margin:0;padding:0;font-family:微软雅黑;}
	body{height:10000px;}
	.rollTop{height:40px;width:40px;position:fixed;left:95%;top:90%;display:none;}
</style>
<script type="text/javascript" src="jquery-1.9.1.js"></script>
<script type="text/javascript" src="jquery.top.js"></script>
</head>

<body>
	<button class="rollTop"></button>
</body>
<script type="text/javascript">  
jQuery(document).ready(function(){  
      $(".rollTop").backTop({"backTimer":200}); 
});  
</script>
</html>