JS的scrollIntoView

時間 2019-12-04

原文原文鏈接

scrollIntoView(alignWithTop) 滾動瀏覽器窗口或容器元素，以便在當前視窗的可見範圍看見當前元素。若是alignWithTop爲true，或者省略它，窗口會盡量滾動到自身頂部與元素頂部平齊。-------目前各瀏覽器均支持，其實就這個解釋來講，我以爲仍是不夠的，最好仍是又圖對吧，來看下圖，更好理解javascript

<!DOCTYPE html>
<!--
To change this license header, choose License Headers in Project Properties.
To change this template file, choose Tools | Templates
and open the template in the editor.
-->
<html>
    <head>
        <title>TODO supply a title</title>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
    </head>
    <body>
        <a onClick="onc()">dasdasd</a>
        <div style="width:400px; height:400px; border: 1px solid #f00;"></div>
            <div id="nn" style="border:1px solid #666">
                <div style="height:900px;">sadasdasd</div> 
            </div>
    </body>
    <script type="text/javascript"><br>　　　//做爲一個事件的函數來被調用
        function onc () {
        var dd = document.getElementById("nn").scrollIntoView(true);　　　　　//這個意思其實就是將這個元素到頂部來瀏覽器窗口的頂部來顯示
    }
    </script>
</html>

如圖：css

這個id爲nn的ｄｉｖ就會到瀏覽器窗口的頂部顯示；html

至於false，你能夠自行去嘗試一下，效果也是很明顯的，java

＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝express

經過這個函數作的一個小實例，鎖定網頁的導航條，而後點擊導航，調到指定的div，這個功能在通常的網頁設計中是很常見的，看代碼：瀏覽器

<!DOCTYPE html>
<!--
To change this license header, choose License Headers in Project Properties.
To change this template file, choose Tools | Templates
and open the template in the editor.
-->
<html>
    <head>
        <title>nav測試</title>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <style type="text/css">
            *{margin:0; padding:0}
            body{width:960px; height:2000px; margin:0 auto; border: 1px dotted #432432;}
            ul,li{list-style-type: none;}
            a{text-decoration: none;}
             
            .nav{border:1px solid #000;
                 height:30px;
                 z-index:9999;
                position:fixed ;
                top:0px;
                _position:absolute;
                _top:expression(documentElement.scrollTop + "px");
            }
             
            .nav ul li{
                float:left;
                font-size: 16px;
                line-height: 30px;
                padding:0px 63px;
            }
            .nav ul li:hover{
                background: #23ded3;
            }
             
            #main{
                height:1000px;
                border:1px solid #f00;
                margin-top:30px;
            }
             
            #div1{
                height:400px;
                border: 1px solid #ccc;
            }
             
             #div2{
                height:400px;
                border: 1px solid #ccc;
            }
             
             #div3{
                height:400px;
                border: 1px solid #ccc;
            }
        </style>
    </head>
    <body>
        <div id="headr">
            <div class="nav">
                <ul>
                    <li><a>首頁</a></li>
                    <li><a onclick="onc()">你好</a></li>
                    <li><a>很好</a></li>
                    <li><a>他好</a></li>
                    <li><a>真的</a></li>
                    <li><a>哦哦</a></li>
                </ul>
            </div>
        </div>
        <div id ="main" style="width:960px; height: auto;">
            <div id="div1">
                <p>我是ｄｉｖ１的內容</p>
            </div>
             
            <div id="div2">
                <p>我是ｄｉｖ2的內容</p>
            </div>
             
            <div id="div3">
                <p>我是ｄｉｖ3的內容</p>
            </div>
        </div>
        <div id ="footr"></div>
    </body>
    <script type="text/javascript">
        var dHeight = document.documentElement.clientHeight;
        var div1 = document.getElementById("div1");
        var div2 = document.getElementById("div2");
        var div3 = document.getElementById("div3");
        div1.style.height = dHeight - 30 + "px";　　　　　　　　//經過一個js動態的來肯定每一個div的高度,還能夠經過循環來實現，這裏就不加了，各位本身可嘗試
        div2.style.height = dHeight -30 + "px";
        div3.style.height = dHeight -30 + "px";
         
         
            var li = document.getElementsByTagName("li");
            li[0].onclick = function(){
                div1.scrollIntoView(false);　　　　　　　　　　//這裏不能給true否則會將會與導航條重疊
            }
             
            li[1].onclick = function(){
                div2.scrollIntoView(false);
            }
             
            li[2].onclick = function(){
                div3.scrollIntoView(false);
            }
    </script>
</html>

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。