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. JSON 序列化与反序列化（二）使用TypeReference 构建类型安全的异构容器

    1. 泛型通常用于集合,如Set和Map等.这样的用法也就限制了每个容器只能有固定数目的类型参数,一般来说,这也确实是我们想要的. 然而有的时候我们需要更多的灵活性,如数据库可以用任意多的Column ...

  2. Linux ssh服务

    关于ssh服务不多说就提几句,1,机房的服务器一般都是通过远程连接登录的,远程登录就必然少不了ssh客户端.2,虚拟机每次都要点击进去,每次退出来也需要按Ctrl+Alt+Enter,也比较麻烦,有时 ...

  3. js如何转义和反转义html特殊字符

    “<”如何反转义为“<”,“>”如何反转义为“>”,下面就介绍如何用js来实现这种类似的操作. //HTML转义 function HTMLEncode(html) { var ...

  4. odoo继承父类中的函数（方法）

    使用_inherit继承父类重新设计新类时,可以调用父类中的函数,具体为: 第一步:获得某个模型('model.name')的数据集并进行某种集合操作(model_function),从而获得想要的数 ...

  5. lnmp1.4环境下thinkphp3.2配置pathinfo模式

    1.打开php.ini 通常该文件在 /usr/local/php/etc/php.ini vi /usr/local/php/etc/php.ini 找到 cgi.fix_pathinfo,默认为0 ...

  6. 聊一聊 Django 中间件

    Django默认的Middleware有七个: MIDDLEWARE = [ 'django.middleware.security.SecurityMiddleware', 'django.cont ...

  7. window7主题破解与恢复（复制）

    window7主题破解与恢复 1 2 3 分步阅读 windows7主题破解后可以换自己喜欢的主题,但也有一些弊端.这里帮助打家破解与恢复. 工具/原料 UniversalThemePatcher.e ...

  8. JavaScript:学习笔记(8)——对象扩展运算符

    JavaScript:学习笔记(8)——扩展运算符 对象的扩展运算符 扩展运算符是三个点(...).用于取出参数对象的所有可遍历属性,然后拷贝到当前对象之中. 如上图所示,新建了一个对象a,然后通过扩 ...

  9. Python 控制台进度条的实现

    进行爬虫等耗时的任务时,有时会想在控制台输出进度条,以显示当前任务进度.这里总结了两种方法. 方法1:使用tqdm模块 示例代码: from time import sleep from tqdm i ...

  10. sparkSQL整体实现框架

    原创作品,允许转载,转载时请务必以超链接形式标明文章 原始出处 .作者信息和本声明.否则将追究法律责任.http://9269309.blog.51cto.com/9259309/1845525 这篇 ...