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. mongo简介

    MongoDB MongoDB是一款强大.灵活.且易于扩展的通用型数据库 MongoDB 是由C++语言编写的,是一个基于分布式文件存储的开源数据库系统. 在高负载的情况下,添加更多的节点,可以保证服 ...

  2. [Android] Gradle 安装

    Gradle安装非常简单,只要从官网下载压缩包,解压,修改一下环境变量即可. 笔者写本篇随笔时,版本是1.12. Windows下安装 1 到官网(http://www.gradle.org/down ...

  3. spring cloud初识

    spring cloud是spring中的一个快速开发框架.本实例采用spring+maven来配置一个简单的spring开发实例. 1.首先安装java和maven环境. ①.安装java,不做过多 ...

  4. mysql父子查询

    https://segmentfault.com/a/1190000007531328

  5. SPOJ - REPEATS —— 后缀数组 重复次数最多的连续重复子串

    题目链接:https://vjudge.net/problem/SPOJ-REPEATS REPEATS - Repeats no tags  A string s is called an (k,l ...

  6. hdmap相关单词

    交叉口(junction) 交叉口组(junctiongroup)

  7. RQNOJ 169 最小乘车费用：水dp

    题目链接:https://www.rqnoj.cn/problem/169 题意: 给出行驶1-10公里的费用(所有车一样),可以倒车,问行驶n公里的最小费用. 题解: 大水题... (=´ω｀=) ...

  8. PHP中调用接口

    引用:http://zhidao.baidu.com/question/454935450.html&__bd_tkn__=67bd5d3a742a8b244e09a86fb8b824aa95 ...

  9. jsp日期插件My97DatePicker 强大的日期控件 使用方便简单(转)

    本文属转载(希望对编程爱好者有所帮助)详情请访问官方网站 http://www.my97.net/dp/index.asp 一. 简介 1. 简介 目前的版本是:4.7 2. 注意事项 My97Dat ...

  10. 小程序js页面设置上导航颜色

    //导航条颜色更改 wx.setNavigationBarColor({ frontColor: '#ffffff', // 必写项 backgroundColor: '#008de6', // 必写 ...