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. python web框架 django 练习1 django 1.11版本

    django练习 在我自己项目里创建一个xiaoliu的文件夹 里面创建s1.py 文件 s1.py文件 里面写各种函数 from django.shortcuts import HttpRespon ...

  2. redis的相关信息

    Redis支持五种数据类型:string(字符串),hash(哈希),list(列表),set(集合)及zset(sorted set:有序集合). string类型是Redis最基本的数据类型,一个 ...

  3. k8s-离线安装k8s

    1.开始 目标 coreos的igniton.json有很强的可配置性,通过安装时指定集群配置的ignition.json, 安装完成后打开https://{{Master_IP}}:6443/ui直 ...

  4. PKU 1655 Balancing Act(树+树的重心)

    #include<cstdio> #include<cstring> #include<algorithm> #define maxn 20005 using na ...

  5. XDU 1098 (欧拉函数模板题)

    原题链接,点击此处 欧拉函数:φ(N)表示对一个正整数N,欧拉函数是小于N且与N互质的数的个数 通式:φ(x) = x(1-1/p1)(1-1/p2)(1-1/p3)(1-1/p4)…..(1-1/p ...

  6. vue-cli中的.babelrc文件介绍

    转载自:http://www.cnblogs.com/ye-hcj/p/7071850.html { // 此项指明,转码的规则 "presets": [ //个人认为多此一举 [ ...

  7. 通过存储过程创建SQL作业

    USE dbNameGO/****** Object: StoredProcedure [dbo].[usp_Createjob] Script Date: 03/26/2014 14:36:30 * ...

  8. TOSCA自动测试工具跟QTP 和 Selenium的简单对比

    1. 一个课程里的,可以做个简单的参考,有些地方不是很准确

  9. Linux下多线程下载工具myget

    [root@superdba ~]# mytgetMytget 0.0.99: A download accelerator for GNU/LinuxUsage: mytget [options]. ...

  10. Django学习笔记之django-debug-toolbar使用指南

    介绍 django-debug-toolbar 是一组可配置的面板,可显示有关当前请求/响应的各种调试信息,并在单击时显示有关面板内容的更多详细信息. github地址 文档地址 安装 pip3 in ...