jq-animate实现返回顶部效果

时间：2024-06-11 14:36:02

jq-animate实现返回顶部效果：

<!doctype html>

<html lang="en">

<head>

	<meta charset="UTF-8" />

	<title>jq-animate回到顶部</title>

	<style type="text/css">

		* {

			margin: 0;

			padding: 0;

		}

		#wrap {

			height: 30000px;

		}

		#toTop {

			height: 50px;

			width: 50px;

			font-size: 30px;

			line-height: 50px;

			text-align: center;

			position: fixed;

			right: 10px;

			bottom: 10px;

		}

	</style>

	<script src="js/jquery-1.8.3.js" type="text/javascript" charset="utf-8"></script>

</head>

<body>

	<div id="wrap">

		<button id="toTop">^</button>

	</div>

	<script type="text/javascript">

		$('#toTop').click(function() {

			var top1 = $('body').scrollTop();

			var top2 = $(document).scrollTop();//document对象不能执行animate

			var top3 = $(window).scrollTop();//window对象不能执行animate

			console.log(top1);

			console.log(top2);

			console.log(top3);

			$('body').animate({

				scrollTop: '0'

			},1000);

		});

	</script>

</body>

</html>

　　

相关文章