快速回到顶部

<!DOCTYPE html>

<html lang="en">

 

<head>

<meta charset="utf-8">

<title>Back to Top</title>

<meta name="description" content="A simple page showing how to implement a back to top button">

<meta name="author" content="Adi Purdila">

 

<!-- Stylesheets -->

<link rel="stylesheet" href="styles.css" />

 

<!--[if lt IE 9]>

<script src="http://html5shim.googlecode.com/svn/trunk/html5.js"></script>

<![endif]-->

</head>

<body>

 

<div class="container">

<hgroup>

<h1>快速回到顶部按钮</h1>

<h3>~</h3>

</hgroup>

 

<hr />

 

<section>

<p>  文本占位符,内容

==========邪恶的分隔线==========

</p>

<p>

嘿嘿,你发现了,上面的是占位的,哈哈,

</p>

</section>

 

<footer>

<hr />

 

<p>Just some basic footer text.</p>

 

<a href="#" class="go-top">Go Top</a>

</footer>

</div> <!-- end container -->

 

<!-- JavaScript -->

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>

<script>

$(document).ready(function() {

// Show or hide the sticky footer button

$(window).scroll(function() {

if ($(this).scrollTop() > 200) {

$('.go-top').fadeIn(200);

} else {

$('.go-top').fadeOut(200);

}

});

 

// Animate the scroll to top

$('.go-top').click(function(event) {

event.preventDefault();

 

$('html, body').animate({scrollTop: 0}, 300);

})

});

</script>

</body>

</html>

posted @ 2013-05-03 18:28  nik2011  阅读(229)  评论(0编辑  收藏  举报