js scrollTo 实现平缓 返回顶部

时间：2021-06-16 10:06:31

js scrollTo 实现平缓 返回顶部

<!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=utf-8" />
	<title>返回顶部或底部</title>
	<script type="text/javascript" src="js/jquery-1.7.1.min.js"></script>
	<style type="text/css">
		.go
		{
			width: 35px;
			height: 70px;
			z-index: 999;
			opacity: 1;
			position: fixed;
			_position: absolute;
			_top: expression(eval(document.documentElement.scrollTop+document.documentElement.clientHeight-this.offsetHeight-(parseInt(this.currentStyle.marginTop,10)||200)-(parseInt(this.currentStyle.marginBottom,10)||0)));
			right: 2px;
			bottom: 40%;
			border-radius: 5px;
			box-shadow: 0 0 10px #D2C5C5;
			background-color: transparent;
			display: none;
		}
		.go a
		{
			background: url(images/up_down.png) no-repeat;
			display: block;
			text-indent: 999em;
			width: 37px;
			margin: 5px;
			border: 0;
			overflow: hidden;
			float: left;
		}
		
		.go .top
		{
			background-position: -5px 2px;
			height: 22px;
			width: 30px;
		}
		
		.go .top:hover
		{
			background-position: -43px 2px;
		}
		
		.go .bottom
		{
			background-position: -5px -50px;
			height: 22px;
			width: 30px;
		}
		
		.go .bottom:hover
		{
			background-position: -43px -50px;
		}
		
		.content
		{
			max-width: 640px;
			height: 2000px;
			margin: 0px auto;
			background-color: Gray;
		}
	</style>
	<script type="text/javascript">
		var start = 0;           //(开始)滚动的位置(onscroll方法中有赋值)
		var scroDIST = 100;      //每次滚动的距离(单位：px)
		var stime = 100;         //每次滚动花费时间(单位：毫秒)

		//显示或隐藏返回顶/底部层
		window.onscroll = function () {

			var $up_down = $("#go");
			var scro = document.documentElement.scrollTop;
			if (scro <= 0)
				scro = document.body.scrollTop;

			if (scro >= 60) {
				$up_down.fadeIn(600);
			} else if (scro < 60) {
				$up_down.fadeOut(600);
			}

			start = document.documentElement.scrollTop;
			if (start <= 0)
				start = document.body.scrollTop;
		};

		//向下
		function down() {
			var d = setInterval(function () {
				window.scrollTo(start, start + scroDIST);
				start = start + scroDIST;

				var pheight = document.body.scrollHeight;
				if (start >= pheight) {
					clearInterval(d);
				}
			}, stime);
		}


		//向上
		function up() {
			var d = setInterval(function () {
				window.scrollTo(start, start - scroDIST);
				start = start - scroDIST;

				if (start <= 0) {
					clearInterval(d);
				}
			}, stime);
		}
	</script>
</head>
<body>
	<div class="content">
		测试内容
	</div>
	<!-- [B]返回顶/底部 -->
	<div id="go" class="go">
		<a title="返回顶部" class="top" href="javascript:up();"></a><a title="返回底部" class="bottom"
			href="javascript:down();"></a>
	</div>
	<!-- [E]返回顶/底部 -->
</body>
</html>


下载地址： http://pan.baidu.com/s/1gdvkbeV

标签：

相关文章