使用jquery开发返回顶部带缓冲效果的功能

在国内外各大网站我们都能看见返回顶部的这个功能,今天给大家分享一下如果使用jquery开发出带缓冲的效果。

<!DOCTYPE html>
<html>
<head>
	<title>jqeury返回顶部带缓冲效果</title>
	<style type="text/css">
				
		.content{
			margin:20px;
			height: 300px;
		}
		.content:nth-child(odd){
			background-color: red;
		}
		.content:nth-child(even){
			background-color: green;
		}
		.backTop{
			display: inline-block;
			padding:20px;
			border:1px solid red;
			background-color: white;
			position: fixed;
			bottom: 30px;
			right:30px;
			color:#333;
		}
	</style>
</head>
<body>

<div class="content"></div>
<div class="content"></div>
<div class="content"></div>
<div class="content"></div>
<div class="content"></div>
<div class="content"></div>
<div class="content"></div>
<div class="content"></div>
<div class="content"></div>
<div class="content"></div>
<div class="content"></div>
<div class="content"></div>
<div class="content"></div>
<div class="content"></div>
<div class="content"></div>
<div class="content"></div>
<div class="content"></div>
<div class="content"></div>
<div class="content"></div>
<div class="content"></div>
<div class="content"></div>
<div class="content"></div>
<div class="content"></div>
<div class="content"></div>
<div class="content"></div>
<div class="content"></div>
<div class="content"></div>

<a href="javascript:void(0)" class="backTop">顶部</a>
<script type="text/javascript" src="http://libs.baidu.com/jquery/2.1.1/jquery.min.js"></script>
<script type="text/javascript">
	$(document).ready(function(){
		var backTopFun = function(){
			var currtentTop = $(document).scrollTop();
                        // 重点就在这里,我们每次都在当前的高度的基础上减去1/20.
			$(document).scrollTop(currtentTop -currtentTop/20);
			console.info('currtentTop',currtentTop);
			if(currtentTop > 0){
				setTimeout(backTopFun, 10);
			}
		}
		// 	监听点击事件
		$('.backTop').click(backTopFun);

	});
</script>
</body>
</html>
0条评论