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. html知识代码

    <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...

  2. 010-Hadoop Hive sql语法详解5-HiveQL与SQL区别

    1.Hive不支持等值连接 •SQL中对两表内联可以写成:•select * from dual a,dual b where a.key = b.key;•Hive中应为•select * from ...

  3. TP自适应

    最近又要求职了,梳理了下这两年折腾的东西,发现有个产品很可惜,都开发完了,但是没上市.中兴的一款手表,我很喜欢那个金属壳子,结实,拿在手里沉甸甸,可以用来砸核桃. 当时调TP的时候,换了几个厂家,程序 ...

  4. shiro的/favicon.ico问题

    登录成功之后跳转/favicon.ico问题. 1.spring-shrio.xml里面配置加上 /favicon.ico = anon 2.web.xml中配置中加上: <mime-mappi ...

  5. Linux系统下RPM命令和yum的使用

    Linux系统下RPM命令和yum的使用 RPM:Redhat Packages Manager (红帽系列软件包的管理),主要用于安装.卸载.升级和管理软件. 一个包由下面几个部分构成: 例如:ht ...

  6. 存储器系列，L1缓存，L2缓存，内存（RAM），EEPROM和闪存，CMOS与BIOS电池

    因为各级存储硬件的参数和性能不同所以在计算机硬件当中分为以下几种: 由此可见顶级空间小但处理速度最快,下层容量大但处理速度时间较长. 存储器系统采用分层结构,顶层的存储器速度较高,容量较小,与底层的存 ...

  7. ViewFlipper

    main.xml <RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android" xml ...

  8. 一步一步学EF系列二【Fluent API的方式来处理实体与数据表之间的映射关系】

    EF里面的默认配置有两个方法,一个是用Data Annotations(在命名空间System.ComponentModel.DataAnnotations;),直接作用于类的属性上面,还有一个就是F ...

  9. XDU 1037 倍流畅序列(字符串匹配+贪心)

    题目描述 对于一个0,1串s, 从左端开始读取它的0获得序列s0,从右端开始读取它的1获得s1,如果s0与s1同构,则称s为倍流畅序列.例如:011001是一个倍流畅序列, 因为:s0 = 0__00 ...

  10. Codeforces Round #112 (Div. 2) D. Beard Graph

    地址:http://codeforces.com/problemset/problem/165/D 题目: D. Beard Graph time limit per test 4 seconds m ...