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. yum安装软件出错解决方法

    造成yum下载安装时语法出错, 一般是由于python多个版本共存的原因.所以,只需将yum 设置文件固定python 版本,也就是python2 下面的操作能解决版本冲突问题. 1.sudo vim ...

  2. Java基础知识整理之static修饰属性

    static 关键字,我们在开发用的还是比较多的.在<Java编程思想>有下面一段话 static 方法就是没有 this 的方法.在 static 方法内部不能调用非静态方法,反过来是可 ...

  3. camera报错经典问题

    --- 33u>: error: undefined reference to 'NSFeature::RAWSensorInfo<22133u>::impGetDefaultDat ...

  4. smokeping 出现的问题

    Global symbol "%Config" requires explicit package name at /usr/lib64/perl5/lib.pm line 10. ...

  5. gVim/Vim 一键编译、连接、运行 C/C++ 单文件

    用于Gvim 或 Vim 配置文件的一键编译与运行函数(注:需要机器上安装了GCC才行) 本代码只加入了对C/C++的编译与运行,如果要加入其语言的可以参考此代码加入即可 同时,本代码加入了对Wind ...

  6. 检测UTF-8编码

    在PHP检测字符串是否是UTF-8编码的时候,很多人在使用mb_detect_encoding的时候,经常遇到检测不准的问题,下面的方法可以准确检测编码是否是UTF-8 function check_ ...

  7. html5--1.15 style元素与HTML样式基础

    html5--1.15 style元素与HTML样式基础 学习要点: 1.引入样式的三种方式2.了解style元素插入内联样式表与内部样式表 1.引入样式的三种方式 1.外部样式表:通过 link元素 ...

  8. leetcode 66. Plus One(高精度加法)

    Given a non-negative number represented as an array of digits, plus one to the number. The digits ar ...

  9. Spring笔记01（基础知识）

    1.基础知识 01.Spring:轻量级Java EE开源框架,它是由Rod Johnson为了解决企业应用程序开发的复杂性而创建. 02.目标:实现一个全方位的整合框架,实现“一站式”的企业应用开发 ...

  10. [转] 编写高效的 CSS 选择器

    高效的CSS已经不是一个新的话题了,也不是我一个非得重拾的话题,但它却是我在Sky公司工作之时,所感兴趣的,关注已久的话题. 有很多人都忘记了,或在简单的说没有意识到,CSS在我们手中,既能很高效,也 ...