你的位置:首页 > Java教程

[Java教程]JS的scrollIntoView学习


scrollIntoView(alignWithTop)  滚动浏览器窗口或容器元素,以便在当前视窗的可见范围看见当前元素。如果alignWithTop为true,或者省略它,窗口会尽可能滚动到自身顶部与元素顶部平齐。-------目前各浏览器均支持,其实就这个解释来说,我觉得还是不够的,最好还是又图对吧,来看下图,更好理解:

<!DOCTYPE html><!--To change this license header, choose License Headers in Project Properties.To change this template file, choose Tools | Templatesand 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 ></div>      <div id="nn" >        <div >sadasdasd</div>       </div>  </body>  <script type="text/javascript">
   //作为一个事件的函数来被调用 function onc () { var dd = document.getElementById("nn").scrollIntoView(true);     //这个意思其实就是将这个元素到顶部来浏览器窗口的顶部来显示 } </script></html>

 如图:

这个id为nn的div就会到浏览器窗口的顶部显示;

至于false,你可以自行去尝试一下,效果也是很明显的,

=========================================

通过这个函数做的一个小实例,锁定网页的导航条,然后点击导航,调到指定的div,这个功能在一般的网页设计中是很常见的,看代码:

<!DOCTYPE html><!--To change this license header, choose License Headers in Project Properties.To change this template file, choose Tools | Templatesand 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 >        <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" >      <div id="div1">        <p>我是div1的内容</p>      </div>            <div id="div2">        <p>我是div2的内容</p>      </div>            <div id="div3">        <p>我是div3的内容</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>

大家可copy下来,自行在本地测试一下。