给网页添加[回到顶部]和[去底部]功能
首先在需要显示【回顶部】和【去底部】按钮的页面引用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>
到这里，我们的功能就已经实现了。最终效果如下：
