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. python学习之爬虫初体验

    作业来源: "https://edu.cnblogs.com/campus/gzcc/GZCC-16SE2/homework/2851" ** 1.简述爬虫原理 通用爬虫 即(搜索 ...

  2. 错误：软件包：3:docker-ce-18.09.4-3.el7.x86_64 (docker-ce-stable) 需要：container-selinux >= 2.9

    命令:yum -y install http://mirror.centos.org/centos/7/extras/x86_64/Packages/container-selinux-2.68-1. ...

  3. vue图片onerror加载路径写法

    vue里,img加载错误的时候,onerror属性可以加载错误图片的默认图片写法如下: <img class=avator' :src="data.picture" :one ...

  4. cent OS 7查询IP

    环境: win7旗舰版 VMware Workstation Pro (虚拟机软件) CentOS-7-x86_64-DVD-1804.iso 安装时选择了默认配置,最小系统安装. 安装好后用  if ...

  5. python模块的使用

    这位老师的文章说的很清楚:模块 这里我只说一下,我在使用过程中的一些注意事项. 比如,我创建了一个包,该包下面有两个模块:model1和model2,如下图 那么我们再python中怎样去使用自己创建 ...

  6. spring-mvc（基础）

    一.MVC框架的概述 1.作用    ①支持直接一个方法对一请求     ② 支持数据的自动封装     ③ 自动支持上传组件     ④ 自动支持JSON的转成 2.配置流程图 3.基于xml的配置 ...

  7. UI自动化（十四）yaml配置文件

    import yamlimport jsonf = open('config.yaml','rb')data = yaml.load(f)print(json.dumps(data,indent=4) ...

  8. Web 端异步下载文件

    Web 端异步下载文件 实现文件异步下载: 在服务端无法返回文件,或发生异常时给予提示. JavaScript: 服务端返回的JSON对象形如: { code:200, msg:'下载成功|未找到指定 ...

  9. 使用Travis CI自动部署博客到github pages和coding pages

    每次换系统或换电脑之后重新部署博客总是很苦恼?想像jekyll那样,一次性部署完成后,以后本地不用安装环境直接 git push 就能生成博客?那推荐你应该使用使用 Travis CI了. 这篇文章我 ...

  10. C# Winform ComBox三种赋值方式

    https://www.cnblogs.com/ingstyle/p/4815303.html 第一种方法: DataTable dt = new DataTable(); dt.Columns.Ad ...