Simple happiness » 滑动 http://xfuxing.com 越简单越幸福 Sun, 01 Jan 2012 16:55:46 +0000 http://wordpress.org/?v=2.9.2 en hourly 1 jquery滑动回顶部代码 http://xfuxing.com/2009/jquery-sliding-back-to-the-top-of-the-code.html http://xfuxing.com/2009/jquery-sliding-back-to-the-top-of-the-code.html#comments Wed, 22 Jul 2009 02:27:02 +0000 德海 http://xfuxing.com/abc/54 有时候因为网页太长，看到底部的时候再回到最上面的确是让人费劲的事情，拉动滚动条或用鼠标动作，太繁复了。在底部添加一个“返回顶部”的功能确实是不错，方法很多了，可以设锚点，可以用JS，不过这里要说的还是用jquery。代码也是很简单的，就不做说明了。


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="cn" lang="cn">
<head>
<meta http-equiv="Content-type" content="text/html; charset=utf-8" />
<title>Top</title>

<script src="jquery-1.3.2.min.js" type="text/javascript"></script>
<script type="text/javascript">
<!--
$(document).ready(function(){
$('.gotop').click(function(){
$('html, body').animate({scrollTop: 0},300);
});
});
-->
</script>
<style type="text/css">

.gotop {
margin: 0;
padding: 0 20px;
height: 31px;
line-height: 31px;
border: 1px solid #999;
overflow: hidden;
position: relative;
background: #e0e0e0;
text-decoration: none;
color: #000;
display: block;
font-size: 1.2em;
outline: none;
cursor: hand;
}
#kk {
height:1000px;
}

</style>

</head>
<body>
<div>
<ul>
<li>TOP!</li>
</ul>
</div>
<div id="kk"></div>
<div>
<ul>
<li class="gotop">go to top!</li>
</ul>
</div>
</body>
</html>

Simple happiness

您可能感兴趣的文章

]]> http://xfuxing.com/2009/jquery-sliding-back-to-the-top-of-the-code.html/feed 0