Element.scrollIntoView() 方法让当前的元素滚动到浏览器窗口的可视区域内
语法
element.scrollIntoView();
element.scrollIntoView(alignToTop);//Boolean型参数
element.scrollIntoView(scrollIntoViewOptions);//Object型参数
参数
alignToTop (Boolean型参数)
1.如果为true，元素的顶端将和其所在滚动区的可视区域的顶端对齐。
2.如果为false，元素的底端将和其所在滚动区的可视区域的底端对齐。
scrollIntoViewOptions (Object型参数)
{
    behavior: "auto"  | "instant" | "smooth",
    block:    "start" | "end",
}
1.如果是一个boolean，true 相当于{block: "start"}，false 相当于{block: "end"}
2.behavior这个选项决定页面是如何滚动的，实测auto与instant都是瞬间跳到相应的位置，而smooth就是有动画的过程
示例
var element = document.getElementById("box");
element.scrollIntoView();
element.scrollIntoView(false);
element.scrollIntoView({block: "end"});
element.scrollIntoView({block: "end", behavior: "smooth"});
注意
取决于其它元素的布局情况，此元素可能不会完全滚动到顶端或底端。
demo：
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0, minimal-ui">
<meta name="format-detection" content="telephone=no" />
<meta name="applicable-device" content="mobile">
    <title>Title</title>
    <script src="js/zepto.min.js"></script>
    <style>
        .in-top{
            width: 120px;
            height: 30px;
            line-height: 30px;
        }
        .middle{
            width: 100%;
            height: 900px;
            background-color: #95b1ff;
            border-bottom: 2px solid #f00;
        }
        #top{
            width: 100%;
            height: 800px;
            background-color: antiquewhite;
            border-bottom: 2px solid #f00;
        }
    </style>
</head>
<body>
<button class="in-top">click me</button>
<div class="middle">撑地方</div>
<div id="top">top</div>
<script>
    $(".in-top").click(function () {
        document.getElementById("top").scrollIntoView({block:"end",behavior:"smooth"});
    })
</script>
</body>
</html>

Element.scrollIntoView()的更多相关文章

  1. js的Element.scrollIntoView的学习

    1.Element.scrollIntoView()    该方法让当前元素滚动到浏览器窗口的可是区域内: 2.语法: element.scrollIntoView();//等同于element.sc ...

  2. 元素在当前窗口可视的区域---Element.scrollIntoView()

    element.scrollIntoView(); // 等同于element.scrollIntoView(true) element.scrollIntoView(alignToTop); // ...

  3. Element.scrollIntoView() 和 document.elementFromPoint ()

    Element​.scroll​Into​View() 让当前的元素滚动到浏览器窗口的可视区域内 element.scrollIntoView(); // 等同于element.scrollIntoV ...

  4. (88)Wangdao.com第二十一天_JavaScript 元素节点Element 节点

    Element 节点 (元素节点) 是一组对象 对应网页的 HTML 元素 每一个 HTML 元素,在 DOM 树上都会转化成一个 Element 节点对象(以下简称元素节点) 所有元素节点的 nod ...

  5. scrollIntoView 顶部与视图（容器）对齐

    调用方法为 element.scrollIntoView() 参数默认为true. 参数为true时调用该函数,页面(或容器)发生滚动,使element的顶部与视图(容器)顶部对齐: 参数为false ...

  6. scrollIntoView()的用法

    scrollIntoView是一个与页面(容器)滚动相关的API(官方解释),该API只有boolean类型的参数能得到良好的支持(firefox 36+都支持),所以在这里只讨论参数Boolean类 ...

  7. scrollIntoView将指定元素定位到浏览器顶部，底部，中间

    var element = document.getElementById("box"); element.scrollIntoView();//顶部 element.scroll ...

  8. JS的scrollIntoView简单使用

    scrollIntoView方法滚动当前元素,进入浏览器的可见区域 el.scrollIntoView(); // 等同于el.scrollIntoView(true) el.scrollIntoVi ...

  9. js中scrollIntoView()的用法

    一. 什么是scrollIntoView scrollIntoView是一个与页面(容器)滚动相关的API 二. 如何调用 element.scrollIntoView() 参数默认为true 参数为 ...

随机推荐

  1. CAN自收自发问题小结

    2011-12-02 21:59:23 流程图: CAN自收自发问题小结 1,地址如何确定?  答:51的片外扩展地址,R/W脚的电平会根据代码自动更改,不需要设置.    参考 单片机的外部存储器的 ...

  2. Oarcle之单行函数（上）

    dual 是一个虚表,为了满足sql句式而设置这么一个表   单行函数 字符函数 concat 拼接两个字符串 select concat (concat(ename,‘的职位是’),job) fro ...

  3. wpf中插入winform控件并获取句柄

    因工作需要使用wpf做界面,而有个开发包依赖picturebox控件,上网研究了一下,总算弄通了. 首先在项目中添加引用System.Windows.Forms与WindowsFormsIntegra ...

  4. 软件测试实验二----selenium、katalon、junit

    1.安装firefox和seleniumIDE.katalon 安装按成后在Firefox中有seleniumIDE.katalon的图标 2.使用katalon导出测试脚本 点击katalon的插件 ...

  5. First Python script

    learn what is api Jailbreak pycharm install requests on pycharm write first request: get, post MFA l ...

  6. MySQL_Key值（MUL、PRI、NUL）

    查询表结构: mysql> describe cc; +----------+-----------+------+-----+---------+-------+ | Field | Type ...

  7. FUTABA 13-ST-84GINK + DS3231 时钟

    收拾东西的时候又看到之前收拾的vfd相关的盒子,偶然又加的群,又买了两种屏试水. 大的买屏还送vfd变压器,这玩意卖的少,一个5块,不买血亏!不知道什么时候开始早已没有DIY是省钱这种观念了.草... ...

  8. Excel导出采用mvc的ExcelResult继承遇到的问题Npoi导出

    #region 构建Excel文档 //创建Excel文件的对象 NPOI.HSSF.UserModel.HSSFWorkbook book = new NPOI.HSSF.UserModel.HSS ...

  9. 解决 “MoveFile”: 类型库“XXX.dll”中的标识符已经是宏；使用“rename”限定符 类型库符号与系统符号冲突问题

    今天在VS工程当中引入一个组件,编译的时候出现警告, “MoveFile”: 类型库“XXX.dll”中的标识符已经是宏:使用“rename”限定符.虽然只是一个警告,但看着实在不爽,更重要的是,警告 ...

  10. Bigger-Mai 养成计划，前端基础学习之HTML

    HTML 超文本标记语言(Hyper Text Markup Language) 1.一套规则,浏览器认识的规则. 2.开发者: 学习Html规则 开发后台程序: - 写Html文件(充当模板的作用) ...