1. /*
  2. 如果滚动页面也是DOM没有解决的一个问题。为了解决这个问题,浏览器实现了一下方法,
  3. 以方便开发人员如何更好的控制页面的滚动。在各种专有方法中,HTML5选择了scrollIntoView()
  4. 作为标准方法。
  5. scrollIntoView()可以在所有的HTML元素上调用,通过滚动浏览器窗口或某个容器元素,
  6. 调用元素就可以出现在视窗中。如果给该方法传入true作为参数,或者不传入任何参数,那么
  7. 窗口滚动之后会让调动元素顶部和视窗顶部尽可能齐平。如果传入false作为参数,调用元素
  8. 会尽可能全部出现在视口中(可能的话,调用元素的底部会与视口的顶部齐平。)不过顶部
  9. 不一定齐平,例如:
  10. //让元素可见
  11. document.forms[0].scrollIntoView();
  12. 当页面发生变化时,一般会用这个方法来吸引用户注意力。实际上,为某个元素设置焦点也
  13. 会导致浏览器滚动显示获得焦点的元素。
  14. 支持该方法的浏览器有 IE、Firefox、Safari和Opera。
  15. */
  16. document.querySelector("#roll1").onclick = function(){
  17. document.querySelector("#roll_top").scrollIntoView(false);
  18. }
  19. document.querySelector("#roll2").onclick = function(){
  20. document.querySelector("#roll_top").scrollIntoView(true);
  21. }

scrollIntoView() 调用元素就可以出现在视窗中的更多相关文章

  1. 一个N*M的矩阵,找出这个矩阵中所有元素的和不小于K的面积最小的子矩阵

    题目描述: 一个N*M的矩阵,找出这个矩阵中所有元素的和不小于K的面积最小的子矩阵(矩阵中元素个数为矩阵面积) 输入: 每个案例第一行三个正整数N,M<=100,表示矩阵大小,和一个整数K 接下 ...

  2. Vue父组件如何调用子组件(弹出框)中的方法的问题

    如果子组件是一个弹出框,只有在触发某个点击事件时弹出框才能出现(也就是说在父组件中的子组件使用上用了v-if),那在父组件上如果不点击弹出框是不能获取到$ref的. 原因就是:引用指向的是子组件创建的 ...

  3. 在由N个元素构成的集合S中,找出最小元素C,满足C=A-B,其中A,B是都集合S中的元素,没找到则返回-1

    package bianchengti; /* * 在由N个元素构成的集合S中,找出最小元素C,满足C=A-B, * 其中A,B是都集合S中的元素,没找到则返回-1 */ public class f ...

  4. Android反射出一个类中的其他类对象并调用其对应方法

    MainActivity如下: package cn.testreflect; import java.lang.reflect.Field; import java.lang.reflect.Met ...

  5. 调用opencv相关函数,从视频流中提取出图片序列&&&&jpg图片序列,转化成avi格式视频

    /************************ @HJ 2017/3/30 参考http://blog.sina.com.cn/s/blog_4b0020f301010qcz.html修改的代码 ...

  6. [PY3]——找出一个序列中出现次数最多的元素/collections.Counter 类的用法

    问题 怎样找出一个序列中出现次数最多的元素呢? 解决方案 collections.Counter 类就是专门为这类问题而设计的, 它甚至有一个有用的 most_common() 方法直接给了你答案 c ...

  7. 找出数字数组中最大的元素(使用Math.max函数)

    从汤姆大叔的博客里看到了6个基础题目:本篇是第1题 - 找出数字数组中最大的元素(使用Match.max函数) 从要求上来看,不能将数组sort.不能遍历.只能使用Math.max,所以只能从java ...

  8. LeetCode 5071. 找出所有行中最小公共元素(Java)

    题目:5071. 找出所有行中最小公共元素 给你一个矩阵 mat,其中每一行的元素都已经按 递增 顺序排好了.请你帮忙找出在所有这些行中 最小的公共元素. 如果矩阵中没有这样的公共元素,就请返回 -1 ...

  9. 用最小的空间复杂度找出一个长度为n的数组且数据中的元素是[0,n-1]中任一个重复的数据。

    用最小的空间复杂度找出一个长度为n的数组且数据中的元素是[0,n-1]中任一个重复的数据. 比如:[1, 2, 3, 3, 2, 2, 6, 7, 8, 9] 中 2 or 3 分析:这道题目,实现比 ...

随机推荐

  1. Go语言编程读书笔记:Go channel(1)

    Channel是Go语言在语言级别提供的goroutine间的通信方式.我们可以用channel在两个或多个goroutine之间传递消息.channel是进程内的通信方式,因此通过channel传递 ...

  2. 数据分析三剑客之一numpy

    NumPy系统是Python的一种开源的数值计算扩展.这种工具可用来存储和处理大型矩阵. 可以用python实现的科学计算包括: 1.一个强大的N维数组对象Array: 2.比较成熟的(广播)函数库: ...

  3. Heroku登录问题

    second_app 这一步还没有完成,登录接口维护.

  4. Crane (POJ 2991)

    //线段树 延迟标签 // #include <bits/stdc++.h> using namespace std; const int maxn=1e4+5; double x[max ...

  5. jquery 全选、反选、获取值、背景行、隔行变色和鼠标略过变色变色全特效

    好久没有写东西了,当然不是没东西可写,只是没有时间写.今天抽出点时间来把我最近使用的一些 Javascript 特效的东西贴出来,供自己或者别人查询使用.最近我在做一个新的 B/S 系统,由于没有专门 ...

  6. java之数据库相关

    这篇还是在回顾知识.主要是关于java连接Sqlserver2012数据库的一些方式记录,以便以后查询. 十一之内复习完这些知识就可以新学Hibernate啦(*^▽^*) 1.普通方式 注意,在连接 ...

  7. lombok的简单介绍

    ##lombok的使用 一直在使用lombok的set和get,对其他的功能用的比较少,蓦然发现这个库好用的功能不要太多啊 有必要深入理解一番. ###lombok安装 1 需要IDE支持,不然开发的 ...

  8. 人脸检测(1)——HOG特征

    一.概述 前面一个系列,我们对车牌识别的相关技术进行了研究,但是车牌识别相对来说还是比较简单的,后续本人会对人脸检测.人脸识别,人脸姿态估计和人眼识别做一定的学习和研究.其中人脸检测相对来说比较简单, ...

  9. MWeb for Mac使用教程-如何在文档库中快速搜索

    使用MWeb for Mac专业的 Markdown 编辑写作软件,可以让你随时记录自己的想法,灵感,创意,为您的工作节省宝贵的时间.本篇文章带来的是MWeb for Mac如何在文档库中快速搜索使用 ...

  10. [ES]elasticsearch章5 ES的分词(二)

    Elasticsearch 中文搜索时遇到几个问题: 当搜索关键词如:“人民币”时,如果分词将“人民币”分成“人”,“民”,“币”三个单字,那么搜索该关键词会匹配到很多包含该单字的无关内容,但是如果将 ...