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. .net session 使用误区

    1. this.Session["username"] = null  HttpSessionState 内部使用 NameObjectCollection 类型的集合对象来存储用 ...

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

    Liquid Rendering 流体渲染  本文主要讲解Rendering折叠栏中的内容.原文地址:https://docs.chaosgroup.com/display/PHX3MAX/Liqui ...

  3. springboot+maven整合spring security

    springboot+maven整合spring security已经做了两次了,然而还是不太熟悉,这里针对后台简单记录一下需要做哪些事情,具体的步骤怎么操作网上都有,不再赘述.1.pom.xml中添 ...

  4. curl get方式

    提交数据到https时,需要pem证书来加密.我们使用浏览器访问https的时候,浏览器会自动加载网站的安全证书进行加密.但是你用curl请求https时,没有通过浏览器,就只有自己手动增加一个安全证 ...

  5. Nginx动静分离负载均衡

    前期准备 使用Debian环境.安装Nginx(默认安装),一个web项目,安装tomcat(默认安装)等. Nginx.conf配置 # 定义Nginx运行的用户 和 用户组 如果对应服务器暴露在外 ...

  6. Java成员变量与局部变量的区别

    从语法形式上看,成员变量是属于类的,而局部变量是在方法中定义的变量或是方法的参数:成员变量可以被public,private,static等修饰符所修饰,而局部变量不能被访问控制修饰符及static所 ...

  7. 后台商品搜索功能开发SQL

    在做后台的商品搜索功能开发时遇到了一些问题记录下来 版本一 <select id="SelectByNameAndParentId resultMap="Base_resul ...

  8. Java中代理

    普通代理(最简单的代理) 需要有两个实现同一个接口的类,一个是被代理的类,一个是代理类 被代理类中我们按照自己想实现的功能重写接口中的方法 代理类中因为需要代理被代理类,所以在代理类中需要有个被代理类 ...

  9. Oracle定时任务Job笔记

    定时任务应用场景: 某一个生产系统上面,临时表不断变多,占了不少磁盘空间.由于这套软件是直接买的,不方便修改源代码.所以考虑使用Oracle定时任务直接从数据库层删除临时表. 定时任务业务: 首先写好 ...

  10. 十一、eclipse如何创建一个maven工程project

    1. 2. 3. 4. 这是刚创建的工程,因为缺少WEB-INF/web.xml,所以项目会报错 5. 6. 再编写一个web.xml文件,项目就正常了,没有报错:后期需要自己添加对应的pom.xml ...