给网页添加[回到顶部]和[去底部]功能

最新推荐文章于 2020-06-02 19:03:22 发布

joyhen

最新推荐文章于 2020-06-02 19:03:22 发布

阅读量5.4k

点赞数

分类专栏： Javascript HTML

Javascript 同时被 2 个专栏收录

65 篇文章 1 订阅

订阅专栏

HTML

40 篇文章 0 订阅

订阅专栏

原文：http://www.weixq.cn/Article/Detail/1047

当网页内容比较长，导致页面高度比较高，出现滚动条时，我们往往希望可以直接点击按钮到达网页的底部或者顶部。那么今天我们就来实现这样的功能。

首先在需要显示【回顶部】和【去底部】按钮的页面引用JQuery

然后在<head></head>中加入以下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;
}