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. 【bzoj3223】文艺平衡树

    #include<bits/stdc++.h> #define N 300005 #define rat 4 using namespace std; struct Node{ int s ...

  2. 1.Python3标准库--前戏

    Python有一个很大的优势便是在于其拥有丰富的第三方库,可以解决很多很多问题.其实Python的标准库也是非常丰富的,今后我将介绍一下Python的标准库. 这个教程使用的书籍就叫做<Pyth ...

  3. visualvm监控远程机器上的Java程序

    源文:http://hanwangkun.iteye.com/blog/1195526

  4. 关于时间日期的一些操作--java

    # 原创,转载请留言联系 1.获取当前时间 public static void main(String[] args) { Date d1 = new Date(); System.out.prin ...

  5. swagger关闭生产访问

    通过profile注解来处理. Swagger的congif类上声明@Profile({"dev", "test"}),发布到生产上使用product的prof ...

  6. Django-form組件

    Django的Form主要具有一下几大功能: 生成HTML标签 验证用户数据(显示错误信息) HTML Form提交保留上次提交数据 初始化页面显示内容 一.创建Form类 1 2 3 4 5 6 7 ...

  7. 四：ZooKeeper的集群，伪集群，单机的搭建

    一:ZooKeeper服务安装包下载 第一步:打开zooKeeper官网

  8. Intersection of Two Linked Lists——经典问题

    Write a program to find the node at which the intersection of two singly linked lists begins. For ex ...

  9. Multiply Strings——面试题

    Given two numbers represented as strings, return multiplication of the numbers as a string. Note: Th ...

  10. vue分页tbale小荔枝

    首先,动态加载数据 <table class="table table-bordered table-condensed no_margin_bottom jyjg_tab" ...