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学习的更多相关文章

  1. js callee,caller学习

    原文地址:js callee,caller学习 /* * caller 返回一个对函数的引用,该函数调用了当前函数. * 如果函数是由顶层调用的,那么 caller包含的就是 null . * 如果在 ...

  2. 【09-23】js原型继承学习笔记

    js原型继承学习笔记 function funcA(){ this.a="prototype a"; } var b=new funcA(); b.a="object a ...

  3. Knockout.Js官网学习(系列)

    1.Knockout.Js官网学习(简介) 2.Knockout.Js官网学习(监控属性Observables) Knockout.Js官网学习(数组observable) 3.Knockout.Js ...

  4. json2.js的初步学习与了解

    json2.js的初步学习与了解,想要学习json的朋友可以参考下. json2.js的初步学习与了解 1.)该js的下载地址是:http://www.json.org/json2.js 2.)在页面 ...

  5. 原生JS研究：学习jquery源码，收集整理常用JS函数

    原生JS研究:学习jquery源码,收集整理常用JS函数: 1. JS获取原生class(getElementsByClass) 转自:http://blog.csdn.net/kongjiea/ar ...

  6. 《JS权威指南学习总结》

    JS权威指南学习总结:http://www.cnblogs.com/ahthw/category/652668.html

  7. 《JS权威指南学习总结--开始简介》

    本书共分成了四大部分: 1.JS语言核心 2.客户端JS 3.JS核心参考 4.客户端JS核心参考 其中 <JS权威指南学习总结--1.1语法核心> 是:第一部分JS语言核心 各章节重点 ...

  8. Underscore.js 源码学习笔记（下）

    上接 Underscore.js 源码学习笔记(上) === 756 行开始 函数部分. var executeBound = function(sourceFunc, boundFunc, cont ...

  9. Underscore.js 源码学习笔记（上）

    版本 Underscore.js 1.9.1 一共 1693 行.注释我就删了,太长了… 整体是一个 (function() {...}());  这样的东西,我们应该知道这是一个 IIFE(立即执行 ...

随机推荐

  1. 安全测试===Web 安全渗透方面的学习路线

    作者:向生李链接:https://www.zhihu.com/question/21914899/answer/39344435来源:知乎著作权归作者所有.商业转载请联系作者获得授权,非商业转载请注明 ...

  2. twemproxy 简介、安装配置

    twemproxy 简介.安装配置 http://www.xuchanggang.cn/archives/993.html

  3. vs 预编译命令行

    xcopy "$(SolutionDir)\Transight_FY_DataExchange_UI\CuscapiUpdaterServer.xml"  /i /d /y

  4. 2015多校第6场 HDU 5353 Average 贪心，细节处理

    题目链接:http://acm.hdu.edu.cn/showproblem.php?pid=5353 题意:有n个人围城一个环,每一个人手里都有一些糖果,第i个人有ai块.现在有三种操作:第i个人给 ...

  5. 零基础学php的自学

    我们都知道,php语言作为一种专业建站的语言,没有华而不实,而是经受住了时间考验,成为一种值得学习的语言.现在国内众多的php学校也说明,php语言在当今有着广泛的市场需求. 那么零基础的同学如何学习 ...

  6. [New learn] 网络基础-网络操作

    代码:https://github.com/xufeng79x/NETOperation 1.简介 主要记录基本的网络操作步骤,get/post关系和区别和文件上传实现. 2.准备 需要服务器端,如果 ...

  7. Elasticsearch( 插件开发)

    elasticsearch5.2.2 插件开发(一) Scripting plugins:这个插件本质来说,就是会调用用户的脚本,所以可以执行任何的程序,举例的话,可以通过这个插件,支持javascr ...

  8. git clone命令

    从远程clone一个仓库 ...知识浅薄 git clone都发现貌似用的不顺 因为我有几个git账号 但是我也不知道就是git账号是怎么保存在终端上的 所以当我需要用一个新的github账号来clo ...

  9. LeetCode解题报告—— 1-bit and 2-bit Characters & 132 Pattern & 3Sum

    1. 1-bit and 2-bit Characters We have two special characters. The first character can be represented ...

  10. Linux下源码安装jdk

    1.到官网下载 http://www.oracle.com/technetwork/java/javase/downloads/jdk8-downloads-2133151.html