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. BZOJ 3400 [Usaco2009 Mar]Cow Frisbee Team 奶牛沙盘队：dp【和为f的倍数】

    题目链接:http://begin.lydsy.com/JudgeOnline/problem.php?id=1375 题意: 给你n个数,你可以从中选任意多个,但不能不选.问你所选数字之和为f的倍数 ...

  2. tflearn 在每一个epoch完毕保存模型

    关键代码:tflearn.DNN(net, checkpoint_path='model_resnet_cifar10', max_checkpoints=10, tensorboard_verbos ...

  3. C语言中的文件操作

    按照字符的方式读取文件 按照行的方式读取文件 按照数据块的方式读取文件 按照格式化的方式读取文件 文件分类 记录文件:具有一定的结构记录组成,分为定长和不定长两种方式 流式文件:按照一个字符一个字符( ...

  4. ubuntu c++ 关机 重启 挂起 API

    #include <unistd.h> #include <linux/reboot.h> int main() { reboot(LINUX_REBOOT_MAGIC1, L ...

  5. java-03 方法

    #############练习###################### 1.键盘录入乘法表 import java.util.Scanner; public class PrintNN { pub ...

  6. bzoj 2850: 巧克力王国 K-D树

    题目大意 http://www.lydsy.com/JudgeOnline/problem.php?id=2850 题解 对于每个人,我们发现它能够接受的巧克力中 如果对参数分别讨论,那么一定是一个连 ...

  7. Wmware Player中Linux挂载U盘

    菜单(Player)中有一项是可移动设备,中选择U盘,然后选择连接(断开主机), 然后在命令行中敲入 fdisk -l 正常情况下是sda是硬盘的信息,然后将会看到一个单蹦的sdb4的信息(sdb4可 ...

  8. HDU4027(线段树单点更新区间)

    Can you answer these queries? Time Limit: 4000/2000 MS (Java/Others)    Memory Limit: 65768/65768 K ...

  9. POJ3352(连通分量缩点)

    Road Construction Time Limit: 2000MS   Memory Limit: 65536K Total Submissions: 10352   Accepted: 514 ...

  10. algo: 冒泡排序（Java实现）

    package com.liuxian.algo; public class MySortClass implements Comparable<MySortClass> { public ...