element . scrollIntoView ( ) ;//顶部 element . scrollIntoView ( false ) ;//底部 element . scrollIntoView ( { block : "end" } ) ; element . scrollIntoView ( { behavior : "instant" , block : "end" , inline : "nearest" } ) ;

看一下浏览器兼容性，貌似不支持block的蛮多，我做了一个浏览器的判断，在谷歌，Opera浏览器可以用block，定位到中间，else其他浏览器就老老实实定位到顶部。

element.scrollIntoView();

浏览器的判断方法：

//浏览器判断
function myBrowser() {
  var userAgent = navigator.userAgent;
  var isOpera = userAgent.indexOf("Opera") > -1;
  if (isOpera) {
    return "Opera"
  if (userAgent.indexOf("Firefox") > -1) {
    return "FF";
  if (userAgent.indexOf("Chrome") > -1) {
    return "Chrome";
  if (userAgent.indexOf("Safari") > -1) {
    return "Safari";
  if (userAgent.indexOf("compatible") > -1 && userAgent.indexOf("MSIE") > -1 && !isOpera) {
    return "IE";
var mb = myBrowser();

当然这是一种简单的方法，要兼容多个浏览器的话，建议换一种方式。

比如： js实现页面到滚动到指定位置

再如： 用js将页面定位到某个位置

参考网址： https://developer.mozilla.org/en-US/docs/Web/API/Element/scrollIntoView

$ . scroll Into View （安装，卸载一次） mount ：函数，滚动到视图时执行unmount ：函数，从视图中滚动出来时执行一次：布尔型，默认为false，它仍然会触发该功能时，除非在特定的 元素 已经在视图中可见once被设定为true 。 $ ( function ( ) { var mount = function ( ) { $ ( 'body' ) . css ( 'background-color' , 'red' ) console . log ( 'hi' ) var u <p id="txt">假设此段落需滚动才能看见</p>window.onload=function(){ document.getElementById("txt"). scroll Into View (); //此方法会让页面一进来就能看见txt段落，即一开始就 定位 到此段落 通过querySelector()方法获取 元素 ，并调用 scroll Into View ()方法将其滚动到可视区域内。然后，获取父容器的滚动距离，并根据子 元素 的位置，计算出子 元素 相对于父容器的滚动距离，在调用父容器的 scroll To()方法来实现。如果调用该方法之后， 元素 没有滚动到 指定 的位置，有可能是因为调用的不正确，也有可能是 元素 所在的父容器存在滚动条，导致滚动到了父容器的可视区域内。如果 元素 所在的父容器存在滚动条，可能需要将父容器也一同滚动，才能让 元素 出现在 浏览器 窗口可视区域内。 本文转自： scroll Into View 与 scroll Into View IfNeeded API 介绍 根据MDN的描述，Element. scroll Into View ()方法让当前的 元素 滚动到 浏览器 窗口的可视区域内。而Element. scroll Into View IfNeeded()方法也是用来将不在 浏览器 窗口的可见区域内的 元素 滚动到 浏览器 窗口的可见区域。但如果该 元素 已经在 浏览器 窗口的可见区域... scroll Into View 系列 移动web页面，input获取焦点弹出系统虚拟键盘时，偶尔会出现挡住input的情况，尽管概率不大，但是十分影响用户体验。 scroll Into View element. scroll Into View (alignToTop); alignToTop Boolean 如果为true， 元素 的顶端将... $refs.nowCard[0]. //v-for 循环出的dome 元素 ref=‘xx’ xx[0]block: 'center', // 上边框与视窗 顶部 平齐。behavior: 'smooth', // 平滑过渡。 document.getElementById(50). scroll Into View ({ behavior: 'smooth', //顺滑的滚动 block: 'center', //容器上下的 中间 inline: 'start', //容器左右的左边 上述代码的运行结果： scroll Into View ()方法将调用它的 元素 滚动到 浏览器 窗口的可见区域,但是前提是它的容器可滚动 浏览器 支持如下： Chrome... 文章目录前言 scroll Into View 支持两种参数： scroll Into View IfNeeded 仅支持一种参数：两者区别案例源码参考 scroll Into View IfNeeded 是 scroll Into View 的变体， scroll Into View IfNeeded 不是标准的写法。 scroll Into View 支持两种参数： 1.Object: block: 可选 | start(默认值), center, end, nearest, 定义垂直方向的对齐. inline: 可选 | sta partial interface Element { DOMRectList getClientRects(); [NewObject] DOMRect getBoundingClientRect(); void scroll Into View (optional (boolean or Scroll Into View Options) arg); vo... Ext.Element类Element( String/HTMLElement element, [Boolean forceNew] )由id或DOM节点创建Element对象Element.fly( String/HTMLElement el, [String named] ) : Element由id或DOM节点创建一个全局共享的活动 元素 ,可由named命名以避免可能的冲突Element.g 不传参数的情况下 类似a锚点如果传参数 有2种格式 一种是布尔值 一种是对象 首先是布尔值：如果传true 元素 的顶端将和其所在滚动区的可视区域的顶端对齐。若为false， 元素 的底端将和其所在滚动区的可视区域的底端对齐对象的话  首先ie是不支持的test. scroll Into View ({block: 'start',behavior: 'smooth'});Object型参数，这个对象有两个选项...