前情

在前端开发需求中，经常需要用到锚点功能，以往都是获取元素在滚动容器中的位置再设置scrollTop来实现的。

scrollIntoView介绍

scrollIntoView()方法将调用它的元素滚动到浏览器窗口的可见区域

调用方式：

var element = document.getElementById("test");

element.scrollIntoView（）; // 等同于element.scrollIntoView(true)

element.scrollIntoView（alignToTop）; //布尔参数

element.scrollIntoView（scrollIntoViewOptions）; //对象参数

alignToTop参数说明：

alignToTop [可选]，目前之前这个参数得到了良好的支持
true(默认值) 元素的顶部将对齐到可滚动祖先的可见区域的顶部。对应于scrollIntoViewOptions: {block: "start", inline: "nearest"}。
false 元素的底部将与可滚动祖先的可见区域的底部对齐。对应于scrollIntoViewOptions: {block: "end", inline: "nearest"}。

scrollIntoViewOptions参数说明：

scrollIntoViewOptions [可选]，目前这个参数浏览器对它的支持并不好
behavior [可选]定义过渡动画。"auto","instant"或"smooth"。默认为"auto"
block [可选] "start"，"center"，"end"或"nearest"。默认为"center"
inline [可选] "start"，"center"，"end"或"nearest"。默认为"nearest"

元素可能无法完全滚动到顶端或底端，例如滚动区域不够滚的时候则无法滚动到顶端

使用示例

<!DOCTYPE html>

<html>

<head>

  <meta charset="utf-8">

  <meta name="viewport" content="width=device-width">

  <title>JS Bin</title>

	<style>

		*{

		  padding: 0;

		  margin: 0;

		}

		.container{

		  width: 100%;

		  height: 300px;

		  overflow-x: hidden;

		  overflow-y:auto;

		}

		.item{

		  width：100%;

		  height: 100px;

		  line-height: 100px;

		  margin-bottom: 10px;

		  text-align: center;

		  color: #fff;

		  background-color: green;

		}

		.button{

		  padding: 15px;

		}

	</style>

</head>

<body>

	<div class="container">

	  <div class="item">第1条</div>

	  <div class="item">第2条</div>

	  <div class="item">第3条</div>

	  <div class="item">第4条</div>

	  <div class="item">第5条</div>

	  <div class="item">第6条</div>

	  <div class="item">第7条</div>

	</div>

	<button class="button">跳转到第1条</button>

	<button class="button">跳转到第5条</button>

	<script>

		var items = document.querySelectorAll('.item');

		var button = document.querySelectorAll('.button');

		button[0].addEventListener('click', function(){

		  items[0].scrollIntoView();

		}, false);

		button[1].addEventListener('click', function(){

		  items[4].scrollIntoView();

		}, false);

	</script>

</body>

</html>

演示地址：https://jsbin.com/sadukatunu/edit?html,css,js,output

前端好用API之scrollIntoView的更多相关文章

  1. 前端调用百度API

    <!DOCTYPE html> <html> <head>         <meta charset="UTF-8">       ...

  2. 那些前端二进制操作API

    一直以来,前端的工作主要涉及的是字符串操作,而对二进制的数据接触较少.但是这种需求却一直存在着,尤其是HTML5之后,随着web应用越来越复杂,File,Blob,TypedArray这些API的出现 ...

  3. 阶段5 3.微服务项目【学成在线】_day07 课程管理实战_02-我的课程-前端页面与Api说明

    我的课程列表使用element 的card组件,如下: 前端页面代码 点击新增到了一个新增课程的页面 新增课程的界面 下面的card是循环遍历的代码 写死的card的静态数据 请求服务端的接口拿到数据 ...

  4. 前端好用API之getBoundingClientRect

    前情 在前端开发需求中,经常需要获取元素的尺寸位置相关的属性,以往的做法是调用不同api获取相关属性的. getBoundingClientRect介绍 getBoundingClientRect() ...

  5. 前端好用API之Fullscreen

    前情 在前端开发需求中,特别网页有视频需求时,需要做视频全屏功能,或者在某些可视化大屏项目也要做全屏. Fullscreen介绍 让你可以简单地控制浏览器,使得一个元素与其子元素,如果存在的话,可以占 ...

  6. JavaScript前端最全API集锦

    一.节点1.1 节点属性Node.nodeName   //返回节点名称,只读Node.nodeType   //返回节点类型的常数值,只读Node.nodeValue  //返回Text或Comme ...

  7. 前后端分离开发之前端自己的API（DB）---- （1）

    Creating demo APIs for Front-End Developer 心理准备 Tool-1 开发工具/编辑器:Visual Studio Code , 即 VSCode官网: htt ...

  8. 总结一下公司项目使用各种较新的前端技术和 Api 的一些经验。

    关于 ES6: 需要注意 ES6 的一些特性和 API 是需要一个 200k 的 Polyfill 才能得到支持的,特性如 for ... of 循环,generator,API 如 Object.a ...

  9. ABP .Net Core API和Angular前端APP集成部署

    前言:在ABP官网(https://aspnetboilerplate.com)生成的.Net Core + Angular项目前后端是两个独立的项目,我们可以分开部署,也可以将前端和Web API一 ...

  10. 前端API层架构，也许你做得还不够

    上午好,今天为大家分享下个人对于前端API层架构的一点经验和看法.架构设计是一条永远走不完的路,没有最好,只有更好.这个道理适用于软件设计的各个场景,前端API层的设计也不例外,如果您觉得在调用接口时 ...

随机推荐

  1. docker安装运行kafka单机版

    这里我们安装一下kafka的单机版,由于kafka是基于zk进行管理的,如果我们没有安装过zk的话,需要进行安装好zk再安装kafka,当然如果已经安装过了, 那就没必要安装了.我们可以执行docke ...

  2. 我发布了一款相亲平台《i相遇》

    因缘际会之下,我踏入了相亲平台的领域.起初,是为一位客户打造专属相亲应用,过程中深入体验了众多同类平台,却遗憾地发现它们普遍掺杂着欺诈的阴影--高昂的费用.兼职托儿的身影.以及虚假的钓鱼信息,不一而足 ...

  3. bfs 与优先队列————洛谷p1126（历经两个小时总算AC了，哭晕）

    机器人搬重物 题目描述 机器人移动学会(RMI)现在正尝试用机器人搬运物品.机器人的形状是一个直径 \(1.6\) 米的球.在试验阶段,机器人被用于在一个储藏室中搬运货物.储藏室是一个 \(N\tim ...

  4. map&unordered_map<key,value>key使用自定义类的要求

    std::unordered_map 的键要求: std::unordered_map 是基于哈希表的数据结构. 它要求键类型必须支持哈希计算,也就是必须有对应的 std::hash 函数. 另外,键 ...

  5. Android 常用的性能分析工具详解：GPU呈现模式

    此篇将重点介绍几种常用的Android性能分析工具: 一.Logcat 日志 选取Tag＝ActivityManager,可以粗略地知道界面Displaying的时间消耗.当我们打开一个Activit ...

  6. linux kernel 中tracing buffer

    Linux内核的tracing buffer是一种用于存储内核跟踪数据的特殊缓冲区.它用于记录内核中发生的事件和活动,以帮助开发人员进行性能分析和故障排查.该缓冲区可以在内核运行时启用,并且可以通过特 ...

  7. 三维医学图像数据扩充：flip and rotate

    对于小数据量医学图像进行深度学习使,会由于数据量过小而过拟合.因此我们需要采用数据扩充方法,而flip和rotate又是经常用到的,这里做一个简单的实现. 输入为[batchsize,height, ...

  8. Javascript的基本数据类型和引用数据类型有哪些？null 和 undefined的区别

    基本数据类型 : number string boolean null undefined 引用数据类型: object   -->  function array function and a ...

  9. python的十大数据结构之堆队列heapq(heap queue)

    heap queque(堆队列),是一个完全二叉树,并且满足一个条件:每个节点(叶节点除外)的值都大于等于(或小于等于)它的子节点.提供了构建小顶堆的方法和一些小顶堆的基本操作方法(如入堆.出堆等), ...

  10. Taylor series Explicit Euler Implicit Euler

    1 Taylor series \[\begin{gathered}\sum_{n=0}^{\infty}\frac{f^{(n)}\left(a\right)}{n!}\left(x-a\right ...