JavaScript实现快速定位到底部和顶部

JavaScript实现快速定位到底部和顶部的前端的名字：
【准备材料】：① HTML知识；② JavaScript知识；③ CSS知识；④ 知道如何导入jQuery；
【申明】本例子来源于[站长素材]；
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">

    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=utf8" />
        <title>置顶置底演示</title>
        <script type="text/javascript" src="js/jquery-3.3.1.js" ></script>
        <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'
                        }, 400);
                    });
                    $('#updown .down').click(function() {
                        $('html,body').animate({
                            scrollTop: document.body.clientHeight + 'px'
                        }, 400);
                    });
                }

            );
        </script>
        <style type="text/css">
            * {
                padding: 0;
                margin: 0
            }
            
            body {
                height: 3000px;
            }
            
            #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(images/updown.png) no-repeat;
            }
            
            #updown .up:hover {
                background: url(images/updown.png) top right no-repeat;
            }
            
            #updown .down {
                background: url(images/updown.png) bottom left no-repeat;
            }
            
            #updown .down:hover {
                background: url(images/updown.png) bottom right no-repeat;
            }
            
            a {
                text-decoration: none;
                outline: none;
                color: #666666;
            }
            
            a:hover {
                text-decoration: none
            }
            
            img {
                border: 0
            }
            
            ul {
                list-style: none;
                margin: 0;
            }
            
            h2 {
                color: #6CBD45;
                font-size: 14px;
                font-weight: bold;
                padding-bottom: 0.5em;
                margin: 0;
            }
            
            h3 {
                font-size: 13px;
                font-weight: bold;
            }
            
            #meun {
                color: #fff;
                padding-left: 10px;
            }
            
            #meun img {
                float: left;
            }
            
            #submeun {
                margin-left: 70px;
                float: left;
            }
            
            #submeun li {
                text-align: center;
                margin-right: 10px;
                float: left;
                display: inline;
            }
            
            #submeun li a {
                color: #fff;
                height: 50px;
                line-height: 50px;
                font-size: 14px;
                font-weight: bold;
                text-align: center;
                padding-left: 15px;
                padding-right: 15px;
                display: block;
            }
            
            #submeun li.cur {
                text-align: center;
                background: #82ce18;
                margin-right: 10px;
                float: left;
                display: inline;
            }
            
            #top {
                background-color: #000;
                margin: 0em 0 10px 0em;
                border-style: solid;
                border-width: 1px;
                border-color: #E5E5E5;
                height: 50px;
                line-height: 50px;
            }
            
            h2.subtitle {
                font-size: 13px;
                float: right;
                color: #6CBD45;
                margin: 0 10px;
                text-align: right;
            }
            
            h1.title {
                height: 50px;
                font-size: 12px;
                background: url(logo.png) no-repeat;
            }
            
            h1.title a:link,
            h1.title a:visited,
            h1.title a:hover {
                color: #000;
                text-decoration: none;
            }
            
        </style>
    </head>

    <body>
        <div id="content"><br><br><br><br>
            <center><b><font size="7" color="#FF0000">请往下滚动</font></b></center><br><br><br>
            <!--DEMO start-->
            <div id="updown"><span class="up"></span><span class="down"></span></div>
            <!--DEMO end-->
        </div>
        <p align="center">适用浏览器：IE8、360、FireFox、Chrome、Safari、Opera、傲游、搜狗、世界之窗.</p><br>
        <p align="center">来源：
            <a href="http://sc.chinaz.com/" target="_blank">站长素材</a>
        </p>
    </body>

</html>
① 初始效果显示：
② 操作显示：
JavaScript实现快速定位到底部和顶部

猜你喜欢
