1、Element.scrollIntoView()

   该方法让当前元素滚动到浏览器窗口的可是区域内；

2、语法:
   element.scrollIntoView();//等同于element.scrolIntoView(true)
   element.scrollIntoView(alignToTop);//Boolean型参数
   element.scrollIntoView(scrollIntoViewOptions);//Object型参数

   参数
    alignToTop:true--- 元素的顶端和器所在滚动区的可视区域顶端对齐
               true 相当于{block:start}
               false--- 元素的底端将和其所在滚动区的可视区域底端对齐
               false 相当于{block:end}
    scrollIntoViewOptions：一个boolean值或一个带有选项的object
    {
      behavior:'auto' | 'instant'|'smooth',
      block:'start' | 'end'
    }
 <!DOCTYPE html>

 <html lang="en">

 <head>

     <meta charset="UTF-8">

     <title>scrollToView的学习</title>

     <style>

         #containers{

             background-color: black;

             width:300px;

             height:50px;

             display: flex;

             justify-content: space-around;

             position: fixed;

             left:42.1%;

         }

         .clear{

             height:50px;

         }

         .title{

             color: #ffffff;

         }

         #title1-item,#title2-item,#title3-item{

             width:300px;

             height:800px;

             border:1px solid #dddddd;

             margin: auto;

             margin-bottom: 20px;

             box-sizing: border-box;

             padding-top: 50px;

         }

     </style>

 </head>

 <body>

  <div id="containers">

      <div data-target="#title1-item" class="title">商品</div>

      <div data-target="#title2-item" class="title">详情</div>

      <div data-target="#title3-item" class="title">评价</div>

  </div>

  <div class="clear"></div>

  <div id="title1-item">商品对应的部分</div>

  <div id="title2-item">详情对应的部分</div>

  <div id="title3-item">评价对应的部分</div>

  <script type="text/javascript">

      var aHref = document.getElementsByClassName('title');

      var title1Item = document.getElementById('title1-item');

      var title2Item = document.getElementById('title2-item');

      var title3Item = document.getElementById('title3-item');

      console.log(aHref[0]);

      aHref[0].onclick=function(){

          title1Item.scrollIntoView(true);

      };

      aHref[1].onclick=function(){

          title2Item.scrollIntoView(false);

      };

      aHref[2].onclick=function(){

          title3Item.scrollIntoView();

      }

  </script>

 </body>

 </html>
3、浏览器支持
   scrollIntoViewOptions IE浏览器，Safari 不支持
   IE8版本以下，Safari 5.0版本以下 不支持 "smooth" 属性 和 "center" 设置项.
   Firefox 36  不支持 "inline" 设置项。不支持设置项的值 "nearest" 或 "center"。
   移动端：
    scrollIntoViewOptions 会有一些低配版本的手机不支持

js的Element.scrollIntoView的学习的更多相关文章

  1. Element.scrollIntoView()

    Element.scrollIntoView() 方法让当前的元素滚动到浏览器窗口的可视区域内 语法 element.scrollIntoView(); element.scrollIntoView( ...

  2. js的常用方法和对象学习

    js的常用方法和对象学习String对象:操作字符的. 使用:字符串.函数名. 大小写转换: toUpperCase() 转换大写 toLowerCase() 转换小写 function testSt ...

  3. 元素在当前窗口可视的区域---Element.scrollIntoView()

    element.scrollIntoView(); // 等同于element.scrollIntoView(true) element.scrollIntoView(alignToTop); // ...

  4. (vue.js)Vue element tab 每个tab用一个路由来管理？

    (vue.js)Vue element tab 每个tab用一个路由来管理? 来源:网络整理     时间:2017/5/13 0:24:01     关键词:   关于网友提出的“ (vue.js) ...

  5. Element.scrollIntoView() 和 document.elementFromPoint ()

    Element​.scroll​Into​View() 让当前的元素滚动到浏览器窗口的可视区域内 element.scrollIntoView(); // 等同于element.scrollIntoV ...

  6. FastAPI实践项目：SayHello(FastAPI + vue.js + axios + element ui)

    目录 简介 翻版 VS 本尊 后端服务 源码 接下来 简介 这次带来的是FastAPI + vue.js + axios + element ui (一个html文件里使用的) 实现的<Flas ...

  7. js实现element中可清空的输入框（2）

    接着上一篇的:js实现element中可清空的输入框(1)继续优化,感兴趣的可以去看看哟,直通车链接:https://www.cnblogs.com/qcq0703/p/14450001.html 实 ...

  8. Vue.js教程 1.前端框架学习介绍

    Vue.js教程 1.前端框架学习介绍 什么是Vue.js 为什么要学习流行框架 什么是Vue.js Vue.js 是目前最火的一个前端框架,React是最流行的一个前端框架(React除了开发网站, ...

  9. js 常见弹出框学习

    模拟系统的弹出框 系统自带的弹出框 总结 链接  http://blog.csdn.net/anhuidelinger/article/details/17024491 参考这个网站学习模态框的动态弹 ...

随机推荐

  1. 微信小程序开发：学习笔记[7]——理解小程序的宿主环境

    微信小程序开发:学习笔记[7]——理解小程序的宿主环境 渲染层与逻辑层 小程序的运行环境分成渲染层和逻辑层. 程序构造器

  2. PAT天梯赛 L2-020. 功夫传人 【DFS】

    题目链接 https://www.patest.cn/contests/gplt/L2-020 思路 从师父开始 一层一层往下搜 然后 搜到 得道者 就更新答案 AC代码 #include <c ...

  3. u盘安装debian 7(Wheezy) stabe

    将一个闲置u盘插入电脑usb口.从http://mirrors.sohu.com/debian-cd/7.4.0/amd64/iso-dvd/debian-7.4.0-amd64-DVD-1.iso ...

  4. matlab之scatter3()函数

    Display point cloud in scatter plot(在散点图中显示点云): scatter3(X,Y,Z) 在向量 X.Y 和 Z 指定的位置显示圆圈. scatter3(X,Y, ...

  5. bzoj1177&p3625 [APIO2009]采油区域p[大力讨论]

    我好菜菜啊. 给定矩形,从中选出三个边长K的正方形互不重叠,使得覆盖到的数总和最大. 想的时候往dp上钻去了..结果一开始想了一个错的dp,像这样 /************************* ...

  6. bzoj 1731 [Usaco2005 dec]Layout 排队布局——差分约束

    题目:https://www.lydsy.com/JudgeOnline/problem.php?id=1731 对差分约束理解更深.还发现美妙博客:http://www.cppblog.com/me ...

  7. Oracle创建表,并添加默认值和备注

    create table testemp( id varchar2(50) default sys_guid(),deptno varchar2(20) ,--部门编码 ename varchar2( ...

  8. PPI协议详解 ppi通讯协议 ppi通信协议 vb与ppi协议通讯

    转自:http://blog.csdn.net/vbvcde/article/details/7660497 我们提供 PPI协议的官方文档,协议更新时间为2005年,下面是我们根据文档解析的PPI读 ...

  9. sum(sum(abs(y))) 中 sum(sum())什么意思?

    >> y=[1 3;2 5] y =      1     3      2     5 >> sum(y) ans =      3     8 >> sum(s ...

  10. bzoj4176

    莫比乌斯反演 根据约数和个数公式 $ans = \sum_{i=1}^{n}\sum_{j=1}^{n}\sum_{x|i}\sum_{y|j}{[gcd(i, j)==1]}$ 交换枚举顺序 $an ...