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. java组件学习15天

    Linuxdocker redminegitlabnginxmavenkibanakafkaspringspring cloudLucene 搭建基本使用

  2. java的TimeUtils或者DateUtils的编写心得

    一.几种常见的日期和时间类介绍 介绍时间工具类不可避免必须要去触碰几个常见的日期和时间类,所以就简单介绍一下. 1.jdk1.8之前的日期时间类 a.Date类 我们可以通过new的方式生成一个Dat ...

  3. Docker+.Net Core 的那些事儿-4.还有这种操作！？

    1.通过docker run -v命令映射工作目录 通过一系列上述操作,我们可以发现我们的发布是基于镜像的,也就是说,在后期的迭代过程中,如果有些代码修改,我们就不得不删除旧的容器和镜像,dotnet ...

  4. quartz (二) Spring+Quartz实现定时任务的配置方法

    JobDetail  设置执行的任务 :CronTrigger   触发器:设置执行的时间规则      ;  Scheduler    // 调度器,将任务与执行时间关联 本文转自:http://w ...

  5. zookeeper 监听事件 PathChildrenCacheListener

    zookeeper 监听事件 PathChildrenCacheListener PathChildrenCacheListener一次父节点注册,监听每次子节点操作,不监听自身和查询. 1.测试类: ...

  6. iOS开发之AFNetworking网络编程

    众所周知,苹果搞的一套框架NSContention发送请求与接收请求的方式十分繁琐.操作起来很不方便.不仅要做区分各种请求设置各种不同的参数,而且还要经常在多线程里操作,同时还要对请求与返回的数据做各 ...

  7. LINUX SHELL 笔记 02： 变量初识

    https://www.shellscript.sh/variables1.html 变量是一个可操作(读.写)的内存块的名字. 尝试-1 创建一个变量: root@iZwz:~/labs# sh m ...

  8. Python3.x：访问带参数链接并且获取返回json串

    Python3.x:访问带参数链接并且获取返回json串 示例一: import json import xml.dom.minidom from urllib import request, par ...

  9. JavScript 日期格式化

    JavScript 日期格式化 //日期格式化 function formatDate(date,fmt) { if(date == null || typeof (date) == undefine ...

  10. 20145314郑凯杰 《Java程序设计》第9周学习总结 积极主动敲代码

    20145314郑凯杰 <Java程序设计>第9周学习总结 教材学习内容总结 第十六章 ①JDBC(Java DataBase Connectivity) 即java数据库连接,是一种用于 ...