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 | 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">
   //作为一个事件的函数来被调用

		function onc () {

		var dd = document.getElementById("nn").scrollIntoView(true);	 //这个意思其实就是将这个元素到顶部来浏览器窗口的顶部来显示

	}

	</script>

</html>

如图：

这个id为nn的ｄｉｖ就会到浏览器窗口的顶部显示；

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

＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝

通过这个函数做的一个小实例，锁定网页的导航条，然后点击导航，调到指定的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>

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

巴特西

JS的scrollIntoView学习

最新文章

热门文章