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学习的更多相关文章
- js callee,caller学习
原文地址:js callee,caller学习 /* * caller 返回一个对函数的引用,该函数调用了当前函数. * 如果函数是由顶层调用的,那么 caller包含的就是 null . * 如果在 ...
- 【09-23】js原型继承学习笔记
js原型继承学习笔记 function funcA(){ this.a="prototype a"; } var b=new funcA(); b.a="object a ...
- Knockout.Js官网学习(系列)
1.Knockout.Js官网学习(简介) 2.Knockout.Js官网学习(监控属性Observables) Knockout.Js官网学习(数组observable) 3.Knockout.Js ...
- json2.js的初步学习与了解
json2.js的初步学习与了解,想要学习json的朋友可以参考下. json2.js的初步学习与了解 1.)该js的下载地址是:http://www.json.org/json2.js 2.)在页面 ...
- 原生JS研究：学习jquery源码，收集整理常用JS函数
原生JS研究:学习jquery源码,收集整理常用JS函数: 1. JS获取原生class(getElementsByClass) 转自:http://blog.csdn.net/kongjiea/ar ...
- 《JS权威指南学习总结》
JS权威指南学习总结:http://www.cnblogs.com/ahthw/category/652668.html
- 《JS权威指南学习总结--开始简介》
本书共分成了四大部分: 1.JS语言核心 2.客户端JS 3.JS核心参考 4.客户端JS核心参考 其中 <JS权威指南学习总结--1.1语法核心> 是:第一部分JS语言核心 各章节重点 ...
- Underscore.js 源码学习笔记（下）
上接 Underscore.js 源码学习笔记(上) === 756 行开始 函数部分. var executeBound = function(sourceFunc, boundFunc, cont ...
- Underscore.js 源码学习笔记（上）
版本 Underscore.js 1.9.1 一共 1693 行.注释我就删了,太长了… 整体是一个 (function() {...}()); 这样的东西,我们应该知道这是一个 IIFE(立即执行 ...
随机推荐
- caffe Python API 之 数据输入层（Data,ImageData,HDF5Data）
import sys sys.path.append('/projects/caffe-ssd/python') import caffe4 net = caffe.NetSpec() 一.Image ...
- 方便大家学习的Node.js教程（一）：理解Node.js
理解Node.js 为了理解Node.js是如何工作的,首先你需要理解一些使得Javascript适用于服务器端开发的关键特性.Javascript是一门简单而又灵活的语言,这种灵活性让它能够经受住时 ...
- Redis -- 数据类型小结
redis key 的命名规则: 对象类型:对象id:对象属性 (hset car:1: price 500.hset car:1: name:tom) 一.redis 数据类型: 1. 字符串类型 ...
- 利用BeanUtils工具类封装表单数据
一.BeanUtils工具类的使用 1.首先导入BeanUtils工具类的jar包 commons-beanutils-1.8.0.jar commons-logging-1.1.1.jar 2.se ...
- java 多线程剖析
问题的缘由源自于一道简单的面试题:题目要求如下: 建立三个线程,A线程打印10次A,B线程打印10次B,C线程打印10次C,要求线程同时运行,交替打印10次ABC. 解决问题前我们前补充一些基本知识: ...
- linux命令（43）：cal命令
cal命令可以用来显示公历(阳历)日历.公历是现在国际通用的历法,又称格列历,通称阳历.“阳历”又名“太阳历”,系以地球绕行太阳一周为一年,为西方各国所通用,故又名“西历”. 1．命令格式: cal ...
- python中的偏函数partial
Python的functools模块提供了很多有用的功能,其中一个就是偏函数(Partial function).要注意,这里的偏函数和数学意义上的偏函数不一样. 在介绍函数参数的时候,我们讲到,通过 ...
- opencv c++基本操作
常用操作 imread imread (char *filename, int flag=1); 第二个参数,int类型的flags,为载入标识,它指定一个加载图像的颜色类型.可以看到它自带缺省值1. ...
- APP线上问题收集信息整理
常话说“软件是不能保证百分百没有bug的”,因此当我们的APP上线之后,市场的使用人员会反馈一些我们测试人员可能在测试时遗漏的问题,包括也不防会有一些需求的反馈,这些问题均由售后人员反馈整理,以一种方 ...
- 前端读者 | 百度前端编码规范（CSS）
本文来自:百度FEX 1 前言 CSS作为网页样式的描述语言,在百度一直有着广泛的应用.本文档的目标是使CSS代码风格保持一致,容易被理解和被维护. 虽然本文档是针对CSS设计的,但是在使用各种CSS ...