scrollIntoView(alignWithTop)  滚动浏览器窗口或容器元素，以便在当前视窗的可见范围看见当前元素。如果alignWithTop为true，或者省略它，窗口会尽可能滚动到自身顶部与元素顶部平齐；如果alignWithTop为false，则元素下边框与视窗底部齐平

例：

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>scrollIntoView</title>
<style type="text/css">
body{
height: 20000px;
}
#pink{
margin: 1000px auto 100px;
width: 100px;
height: 200px;
background-color: pink;
}
</style>
</head>
<body>
<button id="btn">点我</button>
<div id="pink"></div>
<script type="text/javascript">
document.getElementById('btn').addEventListener('click', function () {
document.getElementById('pink').scrollIntoView(true);
})
</script>
</body>
</html>

JS的scrollIntoView的更多相关文章

  1. JS的scrollIntoView简单使用

    scrollIntoView方法滚动当前元素,进入浏览器的可见区域 el.scrollIntoView(); // 等同于el.scrollIntoView(true) el.scrollIntoVi ...

  2. JS的scrollIntoView学习

    scrollIntoView(alignWithTop)  滚动浏览器窗口或容器元素,以便在当前视窗的可见范围看见当前元素.如果alignWithTop为true,或者省略它,窗口会尽可能滚动到自身顶 ...

  3. js中scrollIntoView()的用法

    一. 什么是scrollIntoView scrollIntoView是一个与页面(容器)滚动相关的API 二. 如何调用 element.scrollIntoView() 参数默认为true 参数为 ...

  4. 原生JS实现页面内定位

    需求:点击跳转到页面指定位置 <div id="test">点击跳转到此处</div> [法一]: 利用a标签的锚点跳转 <a href=" ...

  5. selenium--浏览器滚动条操作

    前戏 在进行web自动化的时候,selenium只能找当前屏幕上的标签,如果标签在当前页面没显示下,需要拖动滚动条才能查看到这个元素,这时候就要操作浏览器的滚动条,让当前页面显示这个元素才可以操作,在 ...

  6. js scrollIntoView 滚动到元素可视区域

    老是忘记这个函数名,记录一下啊 // 滚动到可视区域 document.querySelector(".loading").scrollIntoView()

  7. js的Element.scrollIntoView的学习

    1.Element.scrollIntoView()    该方法让当前元素滚动到浏览器窗口的可是区域内: 2.语法: element.scrollIntoView();//等同于element.sc ...

  8. js - 锚点-scrollIntoView()

    document.getElementById("view").scrollIntoView(false);

  9. CSS scroll-behavior和JS scrollIntoView让页面滚动平滑

    转自 https://www.zhangxinxu.com/wordpress/2018/10/scroll-behavior-scrollintoview-%E5%B9%B3%E6%BB%91%E6 ...

随机推荐

  1. Linux vim编辑器常用命令

    Vim是一个类似于Vi的著名的功能强大.高度可定制的文本编辑器 常用的vim命令如下图 补充: num+命令 对命令执行num次,如  5dd:剪切一行 * 5  即剪切5行,其它如此 /text   ...

  2. 前端 javascript 变量

    变量: python: name = 'alex' JavaScript: name = 'alex' # 全局变量 声明var var name = 'eric' # 局部变量 写全局变量基本好少J ...

  3. Hbase架构和读写流程

    转载自:http://www.cnblogs.com/muzili-ykt/p/muzili_ykt.html 在HBase读写时,相同Cell(RowKey/ColumnFamily/Column相 ...

  4. python 学习笔记（循环，print的几种写法，操作符）

    一.循环( for, while) while循环是指在给定的条件成立时(true),执行循环体,否则退出循环.for循环是指重复执行语句. break 在需要时终止for /while循环 cont ...

  5. Mock Server 之 moco-runner 使用指南一

    文章出处http://ju.outofmemory.cn/entry/96866 用以下命令可以启动moco-runner 服务 java -jar moco-runner-<version&g ...

  6. java 并发——内置锁

    坚持学习,总会有一些不一样的东西. 一.由单例模式引入 引用一下百度百科的定义-- 线程安全是多线程编程时的计算机程序代码中的一个概念.在拥有共享数据的多条线程并行执行的程序中,线程安全的代码会通过同 ...

  7. spoj8222

    地址: 题目: NSUBSTR - Substrings no tags  You are given a string S which consists of 250000 lowercase la ...

  8. spark-streaming读kafka数据到hive遇到的问题

    在项目中使用spark-stream读取kafka数据源的数据,然后转成dataframe,再后通过sql方式来进行处理,然后放到hive表中, 遇到问题如下,hive-metastor在没有做高可用 ...

  9. iOS开发之UITableViewController重写

    # UITablViewController方法的使用介绍 - (NSInteger)numberOfSectionsInTableView:(UITableView *)tableView { // ...

  10. ultraedit 查看文件

    转自:https://wenda.so.com/q/1481655902726192 1 UltraEdit在打开文件的时候,会对文件类型进行检查.如果是二进制文件,会自动转为16进制显示模式.如下图 ...