給網頁新增[回到頂部]和[去底部]功能
當網頁內容比較長，導致頁面高度比較高，出現滾動條時，我們往往希望可以直接點選按鈕到達網頁的底部或者頂部。那麼今天我們就來實現這樣的功能。
首先在需要顯示【回頂部】和【去底部】按鈕的頁面引用JQuery
<script src="http://code.jquery.com/jquery-1.10.1.min.js"></script>
然後在<head></head>中加入以下JavaScript程式碼。
<script type="text/javascript">
$(function ()
{
//回到頂部、底部按鈕程式碼
$("#updown").css("top", window.screen.availHeight / 2 - 100 + "px");
$(window).scroll(function ()
{
if ($(window).scrollTop() >= 100)
{
$('#updown').fadeIn(300);
} else
{
$('#updown').fadeOut(300);
}
});
$('#updown .up').click(function () { $('html,body').animate({ scrollTop: '0px' }, 800); });
$('#updown .down').click(function () { $('html,body').animate({ scrollTop: document.body.clientHeight + 'px' }, 800); });
});
</script>
再加入如下CSS
#updown
{
_top: expression(eval((document.compatMode&&document.compatMode=="CSS1Compat")?documentElement.scrollTop+documentElement.clientHeight-this.clientHeight-1:document.body.scrollTop+document.body.clientHeight-this.clientHeight-1));
position: fixed;
_position: absolute;
top: 200px;
right: 30px;
display: none;
}
#updown span
{
cursor: pointer;
width: 48px;
height: 50px;
display: block;
}
#updown .up
{
background: url(../updown.png) no-repeat;
}
#updown .up:hover
{
background: url(../updown.png) top right no-repeat;
}
#updown .down
{
background: url(../updown.png) bottom left no-repeat;
}
#updown .down:hover
{
background: url(../updown.png) bottom right no-repeat;
}
接著，把按鈕圖片放到html頁面的同級目錄。
最後，把html程式碼放到<body></body>裡面，在這裡我直接放到</body>的上一行。
<body>
假設這裡n多內容……
<div id="updown"><span class="up"></span><span class="down"></span></div>
</body>
到這裡，我們的功能就已經實現了。最終效果如下：
