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. Mysql JSON字段提取某一个属性值的函数

    mysql从5.7开始才支持JSON_EXTRACT等 JSON相关的函数, 项目里用到的mysql是5.6的,需要提取JSON字段里某一个属性值进行统计, 自己写了一个笨的提取方法: CREATE ...

  2. PhoenixFD插件流体模拟——UI布局【Splash | Mist】详解

    液体飞溅 | 水雾 本文主要讲解Splash | Mist折叠栏中的内容.原文地址:https://docs.chaosgroup.com/display/PHX3MAX/Liquid+Splash+ ...

  3. Linux运维精华面试题

    1.什么是运维?什么是游戏运维? 1)运维是指大型组织已经建立好的网络软硬件的维护,就是要保证业务的上线与运作的正常,在他运转的过程中,对他进行维护,他集合了网络.系统.数据库.开发.安全.监控于一身 ...

  4. I2C与SMBus

    关于I2C与SMBus,许多人很少去谈论与了解两者的细节差异,包括很多国外的简报,文章也经常将两者混写.交杂描述.交替运用. 确实,在一般运用下,I2C Bus与SMBus没有太大的差别,从实际接线上 ...

  5. 浙江省赛之Singing Everywhere

    题目:http://acm.zju.edu.cn/onlinejudge/showContestProblem.do?problemId=5996 方法: 在大佬的指导下完成. 寻找峰值,找到一共k个 ...

  6. JAVA常用注解

    摘自:https://www.cnblogs.com/guobm/p/10611900.html 摘要:java引入注解后,编码节省了很多需要写代码的时间,而且精简了代码,本文主要罗列项目中常用注解. ...

  7. 2. 2A03简介

    2A03简介 1.CPU 1.1 内部寄存器 1.累加寄存器A(Accumulator):8位寄存器,用于同算术逻辑单元(ALU)共同完成各种算术逻辑运算,它既为ALU提供原始操作数又担任存放ALU运 ...

  8. ztree实现中国省市区树形,可多选

    首先表 CREATE TABLE `sys_area` ( `id` INT(11) NOT NULL COMMENT '编号', `parent_id` INT(11) NOT NULL COMME ...

  9. vue-cli 2.x脚手架build目录中的webpack.base.conf.js配置文件

    此文章用来解释vue-cli脚手架build目录中的webpack.base.conf.js配置文件,适用于vue-cli 2.x版本 此配置文件是vue开发环境的wepack相关配置文件,主要用来处 ...

  10. Spring Boot Web应用开发 CORS 跨域请求支持:

    Spring Boot Web应用开发 CORS 跨域请求支持: 一.Web开发经常会遇到跨域问题,解决方案有:jsonp,iframe,CORS等等CORS与JSONP相比 1. JSONP只能实现 ...