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. CSS3@media媒体查询

    CSS3@media媒体查询 定义 media媒体查询, 当文档宽度变化时, 就可以根据文档宽度的变化来运用样式,不同的宽度应用不同的样式 使用 @media 查询,你可以针对不同的媒体类型定义不同的 ...

  2. varnish 测试

    安装 通过epel 源 yum 安装 [root@localhost varnish]# rpm -ql varnish /etc/logrotate.d/varnish /etc/varnish / ...

  3. 如何在xlwt中编写多个列的单元格？

    目的,写下面的表格: ---------------- | Long Cell | ---------------- | 1 | 2 | ---------------- 如果下面这样写: sheet ...

  4. 破解360doc个人图书馆网站的右键、复制方法

    chrome浏览器如下做法: 右上角菜单按钮→设置→显示高级设置→隐私设置下的 内容设置按钮→javascript下的管理例外情况→添加 [*.]360doc.com 设置为禁止 →完成

  5. ipv4网络无访问权限

    昨天折腾了一天这个网络受限问题,都没有得到解决,驱动精灵.电脑管家(我不用360).重置Winsock目录.网络重置.组策略控制台.重启路由器(学校的以太网,工作时间不好重置路由器)都用了个遍,一直都 ...

  6. flutter常规错误

    https://blog.csdn.net/mo_feng_/article/details/85104013

  7. 工作中常用的 Linux 命令

    awk 示例: env变量值如下,需要获得pkg_url的链接值: {"name": "michael", "sex": "mal ...

  8. codeforce 337D Book of Evil ----树形DP&bfs&树的直径

    比较经典的老题 题目意思:给你一颗节点数为n的树,然后其中m个特殊点,再给你一个值d,问你在树中有多少个点到这m个点的距离都不大于d. 这题的写法有点像树的直径求法,先随便选择一个点(姑且设为点1)来 ...

  9. ActiveReports 大数据分析报告：2019软件开发者现状

    “C++很不错,PHP是世界上最好的语言,所以我选Java …” 在全球软件开发者群体中,关于最优语言与最优框架的争论从未停止. 本次 ActiveReports 大数据分析报告,将借助权威数据,为您 ...

  10. linux命令行安装teamviewer

    teamviewer最新版本为14,但是Ubuntu14.04不支持,安装13版本即可. sudo dpkg -i teamviewer_13.2.26559_amd64.deb若报错,即缺少依赖,运 ...