scrollIntoView(ture)元素上边框与视窗顶部齐平
scrollIntoView(false)元素下边框与视窗底部齐平




<html>

<head>

    <title>HTML5_ScrollInToView方法</title>

    <meta  charset="utf-8">

    <script type="text/javascript">

        window.onload = function(){

            /*

             如果滚动页面也是DOM没有解决的一个问题。为了解决这个问题，浏览器实现了一下方法，

             以方便开发人员如何更好的控制页面的滚动。在各种专有方法中，HTML5选择了scrollIntoView()

             作为标准方法。

             scrollIntoView()可以在所有的HTML元素上调用，通过滚动浏览器窗口或某个容器元素，

             调用元素就可以出现在视窗中。如果给该方法传入true作为参数，或者不传入任何参数，那么

             窗口滚动之后会让调动元素顶部和视窗顶部尽可能齐平。如果传入false作为参数，调用元素

             会尽可能全部出现在视口中（可能的话，调用元素的底部会与视口的顶部齐平。）不过顶部

             不一定齐平，例如：

             //让元素可见

             document.forms[0].scrollIntoView();

             当页面发生变化时，一般会用这个方法来吸引用户注意力。实际上，为某个元素设置焦点也

             会导致浏览器滚动显示获得焦点的元素。

             支持该方法的浏览器有 IE、Firefox、Safari和Opera。

             */

            document.querySelector("#roll1").onclick = function(){

                document.querySelector("#roll_top").scrollIntoView(false);

            }

            document.querySelector("#roll2").onclick = function(){

                document.querySelector("#roll_top").scrollIntoView(true);

            }

        }

    </script>

    <style type="text/css">

        #myDiv{

            height:900px;

            background-color:gray;

        }

        #roll_top{

            height:900px;

            background-color:green;

            color:#FFF;

            font-size:50px;

            position:relative;

        }

        #bottom{

            position:absolute;

            display:block;

            left:0;bottom:0;

        }

    </style>

</head>

<body>

<button id="roll1">scrollIntoView(false)</button>

<button id="roll2">scrollIntoView(true)</button>

<div id="myDiv"></div>

<div id="roll_top">

    scrollIntoView(ture)元素上边框与视窗顶部齐平

    <span id="bottom">scrollIntoView(false)元素下边框与视窗底部齐平</span>

</div>

</body>

</html>


												


											
HTML5_ScrollInToView方法的更多相关文章
	

    
								
  1. HTML5中的DOM新特性
		
    元素下的classList属性 classList属性下面有四个方法: add(value): 添加,已存在的属性不添加 remove(value):删除属性 contain(value):检测属性是 ...
    
		
    2. 
						
  2. javaSE27天复习总结
		
    JAVA学习总结    2 第一天    2 1:计算机概述(了解)    2 (1)计算机    2 (2)计算机硬件    2 (3)计算机软件    2 (4)软件开发(理解)    2 (5) ...
    
		
    3. 
						
  3. mapreduce多文件输出的两方法
		
    mapreduce多文件输出的两方法   package duogemap;   import java.io.IOException;   import org.apache.hadoop.conf ...
    
		
    4. 
						
  4. 【.net 深呼吸】细说CodeDom（6）：方法参数
		
    本文老周就给大伙伴们介绍一下方法参数代码的生成. 在开始之前,先补充一下上一篇烂文的内容.在上一篇文章中,老周检讨了 MemberAttributes 枚举的用法,老周此前误以为该枚举不能进行按位操作 ...
    
		
    5. 
						
  5. IE6、7下html标签间存在空白符，导致渲染后占用多余空白位置的原因及解决方法
		
    直接上图:原因:该div包含的内容是靠后台进行print操作,输出的.如果没有输出任何内容,浏览器会默认给该空白区域添加空白符.在IE6.7下,浏览器解析渲染时,会认为空白符也是占位置的,默认其具有字 ...
    
		
    6. 
						
  6. 多线程爬坑之路-Thread和Runable源码解析之基本方法的运用实例
		
    前面的文章:多线程爬坑之路-学习多线程需要来了解哪些东西?(concurrent并发包的数据结构和线程池,Locks锁,Atomic原子类) 多线程爬坑之路-Thread和Runable源码解析 前面 ...
    
		
    7. 
						
  7. [C#] C# 基础回顾 - 匿名方法
		
    C# 基础回顾 - 匿名方法 目录 简介 匿名方法的参数使用范围 委托示例 简介 在 C# 2.0 之前的版本中,我们创建委托的唯一形式 -- 命名方法. 而 C# 2.0 -- 引进了匿名方法,在  ...
    
		
    8. 
						
  8. ArcGIS 10.0紧凑型切片读写方法
		
    首先介绍一下ArcGIS10.0的缓存机制: 切片方案 切片方案包括缓存的比例级别.切片尺寸和切片原点.这些属性定义缓存边界的存在位置,在某些客户端中叠加缓存时匹配这些属性十分重要.图像格式和抗锯齿等 ...
    
		
    9. 
						
  9. [BOT] 一种android中实现“圆角矩形”的方法
		
    内容简介 文章介绍ImageView(方法也可以应用到其它View)圆角矩形(包括圆形)的一种实现方式,四个角可以分别指定为圆角.思路是利用"Xfermode + Path"来进行 ...
    
		
    10. 
		

	


随机推荐
	

    
									
  1. Unity3D研究院之Prefab里面的Prefab关联问题（转）
			
    转自http://www.xuanyusong.com/archives/3042 最近在做UI部分中遇到了这样的问题,就是Prefab里面预制了Prefab.可是在Unity里面一旦Prefab预制 ...
    
			
    2. 
						
  2. ios UIWindow 错误使用导致无法接收motionEnded（摇一摇）函数
			
    今天遇到一个问题,第一次运行程序时,- (void)motionEnded:(UIEventSubtype)motion withEvent:(UIEvent *)event函数无法调用,第二次就好了 ...
    
			
    3. 
						
  3. zpf框架的business使用方法
			
    2015年3月9日 10:58:42 controller 是接受数据分派任务的地方 model 接收controller来的数据, 获取并处理数据库中的数据, 然后再返回给controller 的业 ...
    
			
    4. 
						
  4. ACM/ICPC 之 数据结构-邻接表+BFS(TSH OJ-无线广播Broadcast)
			
    这道题中若能够构成互不干扰的区域,其构成的图其实就是汉密尔顿路(Hamilton road),因此如果能够观察出来可以直接转化为汉密尔顿路的存在性证明,即便不能观察,我相信ACMer也能转化为BFS问 ...
    
			
    5. 
						
  5. Java for LeetCode 236 Lowest Common Ancestor of a Binary Tree
			
    解题思路一: DFS到每个节点的路径,根据路径算出LCA: public class Solution { public TreeNode lowestCommonAncestor(TreeNode  ...
    
			
    6. 
						
  6. Java for LeetCode 222 Count Complete Tree Nodes
			
    Given a complete binary tree, count the number of nodes. Definition of a complete binary tree from W ...
    
			
    7. 
						
  7. MFC Initinstance中DoModal()返回-1
			
    新建一个基于对话框的MFC应用程序,在App的Initinstance中调用对话框DoModal()来显示对话框,这是框架的内容,应用程序框架生成的全部是正常的. 当把我对话框的资源文件提取到一个资源 ...
    
			
    8. 
						
  8. ACdream 1224 Robbers (贪心)
			
    一道贪心题,很久前做的,代码是我以前写的. 题意:有n个抢劫者抢劫了m块金子,然后第i个人平分xi/y块金子,但是会有除不尽的情况而金子不可再分,那么每个人都有一个不满意度fabs(xi / y -  ...
    
			
    9. 
						
  9. HDU 4320 Arcane Numbers 1 (质因子分解)
			
    题目:传送门. 题意:将一个A进制下的有限小数转化为B进制看是否仍为有限小数. 题解:一个A进制的小数可以下次 左移动n位变成A进制整数然后再将其转化为B进制即可 即B^m/A^n要整除,因此A的质因 ...
    
			
    10. 
						
  10. xcode报错，svn ：  is not a workingCopy
			
    解决方案: 1.点击对应的targets 2.选择build phases 3.在红框处有一个run script选项(截图中已经删除了.),点击下拉按钮,看看是否是与svn有关的东西, 如果是,删除 ...
    
			
    11.