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. SVN版本服务器搭建（服务端+客户端）

    原文地址:http://www.cnblogs.com/warrior1988/p/5359084.html 环境:Win7 32 bit SVN简介:程序员在编写程序的过程中,每个程序员都会生成很多 ...

  2. matlab飞机飞行

    function donghua4 %首先建立一个飞机模型 %然后写一个旋转仿射矩阵 %利用仿射变换改变飞机方向 clear;clc;TR=[1 50 41;1 51 50;2 51 1;3 51 2 ...

  3. jmeter接口/性能压测入门

    1.相关知识 https://www.cnblogs.com/star91/p/5059222.html http://www.51testing.com/zhuanti/jmeter.html 测试 ...

  4. Jenkins 配置git

    点击"新建任务"创建一个自用风格的项目 点击"源码管理",选择 git 系统管理 --> Global Tool Configuration<为访问 ...

  5. cent OS 7查询IP

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

  6. 转载-《Python学习手册》读书笔记

    转载-<Python学习手册>读书笔记 http://www.cnblogs.com/wuyuegb2312/archive/2013/02/26/2910908.html

  7. 自制操作系统Antz(10)——实现shell(上)

    我已经规范了系统代码风格,类似于按照linux分包,把各部分功能区分开了 Antz系统更新地址 Linux内核源码分析地址 Github项目地址 在之前的任务中,我们已经通过直接操作显卡驱动完成了简单 ...

  8. 无法在web.xml或使用此应用程序部署的jar文件中解析绝对uri：[http://java.sun.com/jsp/jstl/core]

    访问jsp文件时,出现错误: 解决办法: 1.在Tomcat目录下的lib文件夹中加入jstl包 2. 在maven项目中加入jstl包:

  9. JsTree 最详细教程及完整实例

    JsTree是一个jquery的插件,它提交一个非常友好并且强大的交互性的树,并且是完全免费或开源的(MIT 许可).Jstree技持Html 或 json格式的的数据, 或者是ajax方式的动态请求 ...

  10. 阿里云centos怎么用xshell5登陆

    第一种是用ssh,安装Xshell5   打开XShell   新建会话输入ip   选择新建的会话,点击连接,选择接受并保护,输入root,点击确定   输入密码   已经连接成功了,用Xshell ...