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

Posted superdrew

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了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实现快速定位到底部和顶部的主要内容,如果未能解决你的问题,请参考以下文章

js滚动条滚动到底部和顶部

禁用弹性箱中的流体顶部到底部高度

ggplot2图例到底部和水平

Js判断H5上下滑动方向及滑动到顶部和底部判断

如何将另一个 div 内的 2 个 div 对齐到底部和左/右

JavaScript 拖拽实现