首先在header.php的head标签中加载jQuery库
1 | <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.2.3/jquery.min.js"></script> |
新建一个JS文件，在header.php的head标签中加载，JS文件中加入下例代码：
1 2 | $('.top').click(function(){$('html,body').animate({scrollTop: '0px'}, 800);}); $('.bot').click(function(){$('html,body').animate({scrollTop:$('#footer').offset().top}, 800);}); |
在footer.php文件中加入代码：
1 2 3 4 | <div ID="goto"> <div class="top">顶端</div> <div class="bot">底端</div> </div> |
在CSS文件中添加下例代码：
1 2 3 4 5 | *html #goto { position: absolute; top: expression(eval(document.documentElement.scrollTop+document.documentElement.clientHeight/2));} #goto { position: fixed; left: 50%; top: 50%; bottom: auto; margin-left: -500px; z-index: 999;} #goto .top, #goto .bot { width: 28px; height: 41px; margin: 5px 0; background-image: url('images/goto.gif'); background-repeat: no-repeat; display: block; text-indent: -9999px; cursor: pointer;} #goto .top { background-position: 0 0;} #goto .bot { background-position: 0 100%;} |