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

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

 

首先在需要显示【回顶部】和【去底部】按钮的页面引用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>

 

到这里,我们的功能就已经实现了。最终效果如下:

给网页添加[回到顶部]和[去底部]功能,古老的榕树,5-wow.com

郑重声明:本站内容如果来自互联网及其他传播媒体,其版权均属原媒体及文章作者所有。转载目的在于传递更多信息及用于网络分享,并不代表本站赞同其观点和对其真实性负责,也不构成任何其他建议。