scrollIntoView(b)可以在任何HTML上调用,通过滚动滚动条,调用的元素就可以出现在可视区域.
参数如果是true,或者不传参数,则表示调用元素的顶部与浏览器顶部平齐.
如果传入false,调用元素会尽可能出项在视口中.

HTML代码:

 <input type="button" value="显示红色区域"  onclick="displayRed()"/>
<div style="width:100%; height:2000px;"></div>
<div style="width:100%; height:100px; background-color:Red;" id="guoDiv"></div>
<div style="width:100%; height:2000px;"></div>
 //传入参数时true或不传参数时:
function displayRed() {
document.getElementById("guoDiv").scrollIntoView(true);
}

点击按钮后:

 //传入参数false时:
function displayRed() {
document.getElementById("guoDiv").scrollIntoView(false);
}

点击按钮后:

javascript通过改变滚动条滚动来显示某些元素的scrollIntoView()方法的更多相关文章

  1. 关于如何使用javascript监听滚动条滚动事件

    在网页中,通常有一个通往网页顶部的锚点,现在我们就来实现它 Html代码: <a id="scrollup" href="#top" style=&quo ...

  2. 随滚动条滚动,动态修改元素class

    页面某块内容当页面滚动时,固定在浏览器的一个位置 其实就是改变了便签的class,修改了css属性设置position: fixed:fixed属性可以让便签固定在浏览器某一位置(记得引用jquery ...

  3. 如何定位到append的当前位置,不用拉滚动条scrollIntoView方法

    var bb_mes_con = $('bb_mes_con'); var mes_html = document.createElement('div'); mes_html.setAttribut ...

  4. 解决IE6,IE7下子元素使用position:relative、父元素使用overflow:auto后,子元素不随着滚动条滚动的问题

    解决IE6,IE7下子元素使用position:relative.父元素使用overflow:auto后,子元素不随着滚动条滚动的问题   在IE6,IE7下,子元素使用position:relati ...

  5. 如何通过JQuery将DIV的滚动条滚动到指定的位置

    这里有一个方法可以将DIV的滚动条滚动到其子元素所在的位置,方便自动定位. var container = $('div'), inner = $('#inner'); container.scrol ...

  6. js网页滚动条滚动事件实例分析

    本文实例讲述了js网页滚动条滚动事件用法.分享给大家供大家参考.具体分析如下: 在做js返回顶部的效果时,要监听网页滚动条滚动事件,这个事件就是:window.onscroll.当onscroll事件 ...

  7. 在Table的Tbody中实现滚动条滚动

    功能描述: 在一个Table中实现表头固定不动,内容部分实现通过滚动条滚动. 实现效果: 当页面宽度变宽时,只有最后一列的宽度会改变. 逻辑实现: 1.将表头和内容分别使用两个table标签包裹,每一 ...

  8. JavaScript:编程改变文本样式

    <!DOCTYPE HTML><html><head><meta http-equiv="Content-Type" Content=&q ...

  9. jQuery 滚动条 滚动到底部(下拉到底部) 加载数据(触发事件、处理逻辑)、分页加载数据

    1.针对浏览器整个窗口滚动 主要代码: <script type="text/javascript"> ; function GetProductListPageFun ...

随机推荐

  1. <constant name="struts.devMode" value="false" />

    在开发中,我们常常会遇到<constant name="struts.devMode" value="false" />,这是struts2的特性, ...

  2. 向IOS模拟机上添加图片

    [问题] 折腾: 关于iOS/iPhone中的文件选择对话框,用于用户去选择图片等文件 的过程中,遇到个问题,希望程序提供用户选择自己想要的图片作为Bird的图片. 但是当前开发环境是iOS模拟器,所 ...

  3. NSSearchPathForDirectoriesInDomains用法(转)

    1. iPhone会为每一个应用程序生成一个私有目录,这个目录位于: /Users/sundfsun2009/Library/Application Support/iPhone Simulator/ ...

  4. Linux IO模式-阻塞io、非阻塞io、多路复用io

    一 概念说明 在进行解释之前,首先要说明几个概念: - 用户空间和内核空间 - 进程切换 - 进程的阻塞 - 文件描述符 - 缓存 I/O 用户空间与内核空间 现在操作系统都是采用虚拟存储器,那么对3 ...

  5. 前端开发 —— google chart 的使用

    1. 引入所需的 js 库 在 <head></head>中 <script src="https://ajax.googleapis.com/ajax/lib ...

  6. linux shell except tcl login ssh Automatic interaction

    /*************************************************************************************** * linux she ...

  7. js代码中碰到的函数

    第一个--->字符串的截取substring()方法 substring(a,b)--->[a,b)区间截取字符.下标从0开始.从a下标开始,截取到b下标的前一个字符.返回一个新的字符串 ...

  8. java 2和java有什么区别

    Java是一种通用的,并发的,强类型的,面向对象的编程语言. JDK是Sun公司分发的免费Java开发工具包,正式名称为J2SDK(Java2 Software Develop Kit). 包括基本的 ...

  9. juc包下的集合类

    import java.util.Iterator;import java.util.concurrent.CopyOnWriteArrayList; /** * 集合在多线程中同步的方式: * 1. ...

  10. Hadoop 和 Spark 的关系

    Hadoop实质上是一个分布式数据基础设施: 它将巨大的数据集分派到一个由普通计算机组成的集群中的多个节点进行存储,意味着您不需要购买和维护昂贵的服务器硬件. 同时,Hadoop还会索引和跟踪这些数据 ...