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. DLL中导出ANSI和UNICODE函数

    模仿window中的DLL导出ANSI和UNICODE版本的函数,使用UNICODE宏来控制使用哪个版本: 在函数实际的执行代码UNICODE版本中,在ANSI函数的版本中只做参数的转换,及ANSI字 ...

  2. PAT 天梯赛 L2-022. 重排链表 【数据结构】

    题目链接 https://www.patest.cn/contests/gplt/L2-022 思路 先用结构体 把每个结点信息保存下来 然后深搜一下 遍历一下整个链表 然后就重新排一下 但是要注意一 ...

  3. hihocoder 在线测试 补提交卡 （Google）

    题目1 : 补提交卡 时间限制:2000ms 单点时限:1000ms 内存限制:256MB 描述 小Ho给自己定了一个宏伟的目标:连续100天每天坚持在hihoCoder上提交一个程序.100天过去 ...

  4. 【css学习整理】css基础(样式,语法,选择器)

    CSS是什么? cascading 层叠样式表 sheet 样式文件 style 外观个性化 CSS语法? 声明方法: 选择器(属性: 值; 属性: 值) 选择器: 通过名称制定对哪些标签进行样式设置 ...

  5. Could not find JSON in http://updates.jenkins-ci.org/update-center.json?id=default&version=2.7.4

    14-Sep-2016 21:43:58.241 INFO [Download metadata thread] hudson.model.AsyncPeriodicWork$1.run Finish ...

  6. python的easygui

    1.利用msgbox(单词messagebox的缩写)给出一个提示信息: import easygui as g reply=g.msgbox('This is a basic message box ...

  7. C语言中数据类型和变量

    C语言中的数据类型 数据类型的本质,固定大小内存块的别名. 数组名代表数组首元素的地址. 数组首元素的地址,&代表整个数组的地址. 数组数据类型,怎么定义数据数组类型,定义数组类型指针,数组类 ...

  8. 机器学习 scikit-learn 图谱

    scikit-learn 是机器学习领域非常热门的一个开源库,基于Python 语言写成.可以免费使用. 网址: http://scikit-learn.org/stable/index.html 上 ...

  9. 国内镜像pip

    建议非清华大学校内的使用这个镜像: http://e.pypi.python.org/simple(这也是一个http://pypi.v2ex.com/simple),清华校内的就使用这个:http: ...

  10. CF Round #459

    好菜啊 第一场cf就菜成这样...mdzz 可能是我把题看的太简单了吧... T1AC T2AC T3WA T4看错题 T5不会写 T3想的是栈+暴力 正解:  对于一个pretty串的任意一个位置, ...