如果它大约是10px，那么我猜你可以简单地手动调整包含div的滚动偏移量，就像这样:

el.scrollIntoView(true);
document.getElementById("containingDiv").scrollTop -= 10;

你可以分两步完成:

el.scrollIntoView(true);
window.scrollBy(0, -10); // Adjust scrolling with a negative value here

你也可以使用element.scrollIntoView()选项

el.scrollIntoView(
  { 
    behavior: 'smooth', 
    block: 'start' 
  },
);

大多数浏览器都支持

用绝对法定位锚

另一种方法是将锚定位在页面上想要的位置，而不是依赖于按偏移量滚动。我发现它可以更好地控制每个元素(例如。如果你想对某些元素有不同的偏移量)，并且可能对浏览器API的变化/差异更有抵抗力。

<div id="title-element" style="position: relative;">
  <div id="anchor-name" style="position: absolute; top: -100px; left: 0"></div>
</div>

现在相对于元素的偏移量被指定为-100px。创建一个函数来创建这个锚，以便代码重用，或者如果你正在使用一个现代的JS框架，比如React，通过创建一个渲染锚的组件来实现，并传入锚的名称和每个元素的对齐方式，这些元素可能相同，也可能不相同。

然后使用:

const element = document.getElementById('anchor-name')
element.scrollIntoView({ behavior: 'smooth', block: 'start' });

平滑滚动，偏移量为100px。

基于之前的答案，我在一个Angular5项目中这样做。

开始:

// el.scrollIntoView(true);
el.scrollIntoView({
   behavior: 'smooth',
   block: 'start'
});
window.scrollBy(0, -10); 

但这样会产生一些问题，需要为scrollBy()设置timeout，如下所示:

//window.scrollBy(0,-10);
setTimeout(() => {
  window.scrollBy(0,-10)
  }, 500);

它在MSIE11和Chrome 68+中工作完美。我没有在FF测试过。500毫秒是我敢说的最短延迟。向下走有时会失败，因为平滑的滚动还没有完成。根据您自己的项目进行调整。

+1到Fred727为这个简单而有效的解决方案。

假设你想滚动到DOM中相同级别的div，并且类名为“scroll-with-offset”，那么这个CSS将解决这个问题:

.scroll-with-offset {    
  padding-top: 100px;
  margin-bottom: -100px;
}

与页面顶部的偏移量为100px。它只会像block: 'start'那样工作:

element.scrollIntoView({ behavior: 'smooth', block: 'start' });

所发生的事情是div的顶部在正常位置，但它们的内部内容开始低于正常位置100px。这就是padding-top:100px的作用。margin-bottom: -100px用来抵消下面div的额外边距。 为了使解决方案完整，还添加了这个CSS来抵消最顶部和最底部div的边距/填充:

.top-div {
  padding-top: 0;
}
.bottom-div {
  margin-bottom: 0;
}

我有这个，它对我非常有效:

// add a smooth scroll to element
scroll(el) {
el.scrollIntoView({
  behavior: 'smooth',
  block: 'start'});

setTimeout(() => {
window.scrollBy(0, -40);
}, 500);}

希望能有所帮助。

这适用于我的Chrome浏览器(平滑滚动，没有计时黑客)

它只是移动元素，开始滚动，然后再移动回来。

如果元素已经在屏幕上，则不会出现可见的“弹出”。

pos = targetEle.style.position;
top = targetEle.style.top;
targetEle.style.position = 'relative';
targetEle.style.top = '-20px';
targetEle.scrollIntoView({behavior: 'smooth', block: 'start'});
targetEle.style.top = top;
targetEle.style.position = pos;

我的主要想法是在我们想要滚动到的视图上方创建一个tempDiv。它在我的项目中工作得很好，没有滞后。

scrollToView = (element, offset) => {
    var rect = element.getBoundingClientRect();
    var targetY = rect.y + window.scrollY - offset;

    var tempDiv;
    tempDiv = document.getElementById("tempDiv");
    if (tempDiv) {
        tempDiv.style.top = targetY + "px";
    } else {
        tempDiv = document.createElement('div');
        tempDiv.id = "tempDiv";
        tempDiv.style.background = "#F00";
        tempDiv.style.width = "10px";
        tempDiv.style.height = "10px";
        tempDiv.style.position = "absolute";
        tempDiv.style.top = targetY + "px";
        document.body.appendChild(tempDiv);
    }

    tempDiv.scrollIntoView({ behavior: 'smooth', block: 'start' });
}

示例使用

onContactUsClick = () => {
    this.scrollToView(document.getElementById("contact-us"), 48);
}

希望能有所帮助

平滑滚动到适当的位置

这是大多数情况下更好的答案。它使用滚动边距和滚动填充CSS规则。 下面的解决方案使用getBoundingClientRect，它会触发一个额外的强制布局。

得到正确的y坐标并使用window。scrollTo({top: y，行为:'平滑'})

const id = 'profilePhoto';
const yOffset = -10; 
const element = document.getElementById(id);
const y = element.getBoundingClientRect().top + window.pageYOffset + yOffset;

window.scrollTo({top: y, behavior: 'smooth'});

根据arsenie - ii的回答:我有一个用例，其中滚动实体不是窗口本身，而是一个内部模板(在这种情况下是div)。在这个场景中，我们需要为滚动容器设置一个ID，并通过getElementById获取它来使用它的滚动函数:

<div class="scroll-container" id="app-content">
  ...
</div>

const yOffsetForScroll = -100
const y = document.getElementById(this.idToScroll).getBoundingClientRect().top;
const main = document.getElementById('app-content');
main.scrollTo({
    top: y + main.scrollTop + yOffsetForScroll,
    behavior: 'smooth'
  });

把它留在这里，以防有人面临类似的情况!

这是我的两分钱。

我也有scrollIntoView滚动过去元素一点的问题，所以我创建了一个脚本(本机javascript)，将一个元素前置到目的地，将它定位到顶部的css和滚动到那一个。滚动后，再次删除创建的元素。

HTML:

//anchor tag that appears multiple times on the page
<a href="#" class="anchors__link js-anchor" data-target="schedule">
    <div class="anchors__text">
        Scroll to the schedule
    </div>
</a>

//The node we want to scroll to, somewhere on the page
<div id="schedule">
    //html
</div>

Javascript文件:

(() => {
    'use strict';

    const anchors = document.querySelectorAll('.js-anchor');

    //if there are no anchors found, don't run the script
    if (!anchors || anchors.length <= 0) return;

    anchors.forEach(anchor => {
        //get the target from the data attribute
        const target = anchor.dataset.target;

        //search for the destination element to scroll to
        const destination = document.querySelector(`#${target}`);
        //if the destination element does not exist, don't run the rest of the code
        if (!destination) return;

        anchor.addEventListener('click', (e) => {
            e.preventDefault();
            //create a new element and add the `anchors__generated` class to it
            const generatedAnchor = document.createElement('div');
            generatedAnchor.classList.add('anchors__generated');

            //get the first child of the destination element, insert the generated element before it. (so the scrollIntoView function scrolls to the top of the element instead of the bottom)
            const firstChild = destination.firstChild;
            destination.insertBefore(generatedAnchor, firstChild);

            //finally fire the scrollIntoView function and make it animate "smoothly"
            generatedAnchor.scrollIntoView({
                behavior: "smooth",
                block: "start",
                inline: "start"
            });

            //remove the generated element after 1ms. We need the timeout so the scrollIntoView function has something to scroll to.
            setTimeout(() => {
                destination.removeChild(generatedAnchor);
            }, 1);
        })
    })
})();

CSS:

.anchors__generated {
    position: relative;
    top: -100px;
}

希望这能帮助到大家!

我用，

element.scrollIntoView({ behavior: 'smooth', block: 'center' });

这使得元素在滚动后出现在中心，所以我不需要计算yOffset。

希望能有所帮助……

我添加这些css技巧给那些没有解决这个问题的解决方案:

#myDiv::before {
  display: block;
  content: " ";
  margin-top: -90px; // adjust this with your header height
  height: 90px; // adjust this with your header height
  visibility: hidden;
}

UPD:我已经创建了一个npm包，它比下面的解决方案更好，更容易使用。

我的smoothScroll函数

我采用了Steve Banton的出色解决方案，并编写了一个函数，使其使用起来更方便。使用window.scroll()甚至window.scrollBy()会更容易，因为我以前尝试过，但这两个有一些问题:

一切都变成垃圾后，使用他们与平稳的行为。 你无论如何都不能阻止他们，必须等到卷轴的结尾。 希望我的函数对你们有用。此外，还有一个轻量级的填充程序，可以在Safari甚至IE中运行。

下面是代码

照搬就行，想怎么搞就怎么搞。

import smoothscroll from 'smoothscroll-polyfill';

smoothscroll.polyfill();

const prepareSmoothScroll = linkEl => {
  const EXTRA_OFFSET = 0;

  const destinationEl = document.getElementById(linkEl.dataset.smoothScrollTo);
  const blockOption = linkEl.dataset.smoothScrollBlock || 'start';

  if ((blockOption === 'start' || blockOption === 'end') && EXTRA_OFFSET) {
    const anchorEl = document.createElement('div');

    destinationEl.setAttribute('style', 'position: relative;');
    anchorEl.setAttribute('style', `position: absolute; top: -${EXTRA_OFFSET}px; left: 0;`);

    destinationEl.appendChild(anchorEl);

    linkEl.addEventListener('click', () => {
      anchorEl.scrollIntoView({
        block: blockOption,
        behavior: 'smooth',
      });
    });
  }

  if (blockOption === 'center' || !EXTRA_OFFSET) {
    linkEl.addEventListener('click', () => {
      destinationEl.scrollIntoView({
        block: blockOption,
        behavior: 'smooth',
      });
    });
  }
};

export const activateSmoothScroll = () => {
  const linkEls = [...document.querySelectorAll('[data-smooth-scroll-to]')];

  linkEls.forEach(linkEl => prepareSmoothScroll(linkEl));
};

要创建一个link元素，只需添加以下data属性:

data-smooth-scroll-to="element-id"

还可以将另一个属性设置为加法

data-smooth-scroll-block="center"

它表示scrollIntoView()函数的块选项。默认为start。在MDN上阅读更多。

最后

根据您的需要调整平滑滚动功能。

例如，如果你有一些固定的标题(或者我用单词masthead来称呼它)，你可以这样做:

const mastheadEl = document.querySelector(someMastheadSelector);

// and add it's height to the EXTRA_OFFSET variable

const EXTRA_OFFSET = mastheadEl.offsetHeight - 3;

如果你没有这样的情况，那就删除它，为什么不:-D。

另一个解决方案是使用"offsetTop"，就像这样:

var elementPosition = document.getElementById('id').offsetTop;

window.scrollTo({
  top: elementPosition - 10, //add your necessary value
  behavior: "smooth"  //Smooth transition to roll
});

也许这有点笨拙，但到目前为止还不错。我在angular 9工作。

文件.ts

scroll(el: HTMLElement) {
  el.scrollIntoView({ block: 'start',  behavior: 'smooth' });   
}

. html文件

<button (click)="scroll(target)"></button>
<div  #target style="margin-top:-50px;padding-top: 50px;" ></div>

我用边距和填充顶部调整偏移量。

问候!

20秒内搞定:

这个解属于@ arsenie - ii，我只是把它简化成一个函数。

function _scrollTo(selector, yOffset = 0){
  const el = document.querySelector(selector);
  const y = el.getBoundingClientRect().top + window.pageYOffset + yOffset;

  window.scrollTo({top: y, behavior: 'smooth'});
}

使用方法(您可以在StackOverflow中打开控制台并进行测试):

_scrollTo('#question-header', 0);

我目前正在生产中使用它，它工作得很好。

找到了一个变通的解决方案。假设你想滚动到一个div，比如这里的Element，你想在它上面有一个20px的间距。 在上面设置一个已创建的div的ref:

<div ref={yourRef} style={{position: 'relative'， bottom: 20}}/> < / >元素

这样做将创建您想要的间距。

如果你有一个标题，在标题后面创建一个空的div，并给它分配一个与标题高度相等的高度并引用它。

对于表行中的元素，使用JQuery获取所需元素的上方行，然后简单地滚动到该行。

假设我在一个表中有多行，其中一些行应该由和admin检查。需要审查的每一行都有向上和向下的箭头，引导您到上一项或下一项进行审查。

这是一个完整的例子，如果你在记事本中创建一个新的HTML文档并保存它，它应该会运行。还有额外的代码来检测项目的顶部和底部以进行检查，这样我们就不会抛出任何错误。

<html>
<head>
    <title>Scrolling Into View</title>
    <script src="https://code.jquery.com/jquery-3.5.1.slim.min.js"></script>
    <style>
        div.scroll { height: 6em; width: 20em; overflow: auto; }
        thead th   { position: sticky; top: -1px; background: #fff; }
        .up, .down { cursor: pointer; }
        .up:hover, .down:hover { color: blue; text-decoration:underline; }
    </style>
</head>
<body>
<div class='scroll'>
<table border='1'>
    <thead>
        <tr>
            <th>Review</th>
            <th>Data</th>
        </tr>
    </thead>
    <tbody>
        <tr id='row_1'>
            <th></th>
            <td>Row 1 (OK)</td>
        </tr>
        <tr id='row_2'>
            <th></th>
            <td>Row 2 (OK)</td>
        </tr>
        <tr id='row_3'>
            <th id='jump_1'><span class='up'>UP</span> <span class='down'>DN</span></th>
            <td>Row 3 (REVIEW)</td>
        </tr>
        <tr id='row_4'>
            <th></th>
            <td>Row 4 (OK)</td>
        </tr>
        <tr id='row_5'>
            <th id='jump_2'><span class='up'>UP</span> <span class='down'>DN</span></th>
            <td>Row 5 (REVIEW)</td>
        </tr>
        <tr id='row_6'>
            <th></th>
            <td>Row 6 (OK)</td>
        </tr>
        <tr id='row_7'>
            <th></th>
            <td>Row 7 (OK)</td>
        </tr>
        <tr id='row_8'>
            <th id='jump_3'><span class='up'>UP</span> <span class='down'>DN</span></th>
            <td>Row 8 (REVIEW)</td>
        </tr>
        <tr id='row_9'>
            <th></th>
            <td>Row 9 (OK)</td>
        </tr>
        <tr id='row_10'>
            <th></th>
            <td>Row 10 (OK)</td>
        </tr>
    </tbody>
</table>
</div>
<script>
$(document).ready( function() {
    $('.up').on('click', function() {
        var id = parseInt($(this).parent().attr('id').split('_')[1]);
        if (id>1) {
            var row_id = $('#jump_' + (id - 1)).parent().attr('id').split('_')[1];
            document.getElementById('row_' + (row_id-1)).scrollIntoView({behavior: 'smooth', block: 'start'});
        } else {
            alert('At first');
        }
    });

    $('.down').on('click', function() {
        var id = parseInt($(this).parent().attr('id').split('_')[1]);
        if ($('#jump_' + (id + 1)).length) {
            var row_id = $('#jump_' + (id + 1)).parent().attr('id').split('_')[1];
            document.getElementById('row_' + (row_id-1)).scrollIntoView({behavior: 'smooth', block: 'start'});
        } else {
            alert('At last');
        }
    });
});
</script>
</body>
</html>

解决方案，如果你是使用离子电容器，角材料，并需要支持iOS 11。

                document.activeElement.parentElement.parentElement.scrollIntoView({block: 'center', behavior: 'smooth'}); 

关键是滚动到父节点的父节点，也就是输入的包装器。这个包装器包含输入的标签，该标签现在不再被切断。

如果你只需要支持iOS 14，“block”中心参数实际上是有效的，所以这是足够的:

                document.activeElement.scrollIntoView({block: 'center', behavior: 'smooth'}); 

CSS滚动边距和滚动填充

你可能想看看新的CSS属性滚动填充和滚动边距。可以对滚动容器(在本例中为html)使用滚动填充，对容器内的元素使用滚动边距。

在你的例子中，你想为你想要滚动到视图中的元素添加scroll-margin-top，如下所示:

.example {
  scroll-margin-top: 10px;
}

这会影响scrollIntoView代码，如下所示:

const el = document.querySelector(".example");
el.scrollIntoView({block: "start", behavior: "smooth"});

这将导致视口滚动以使视口的上边界与元素的上边界对齐，但有10px的额外空间。换句话说，元素的这些属性被考虑在内:

padding-top border-top scroll-margin-top (而不是margin-top)

此外，如果html元素有滚动填充顶部设置，那么也会考虑这一点。

我试着使用上面的一些答案，但滚动不起作用。经过一番研究，我注意到滚动位置实际上非常奇怪(甚至是负值)，这是由Angular在路由器出口中渲染页面的方式引起的。

我的解决方案是从页面顶部开始计算元素的滚动位置。我在模板的开头放置了一个id为start-of-page的元素，通过减去目标片段位置来获得滚动量。

 ngAfterViewInit(): void {
    this.route.fragment.subscribe(fragment => {
      try {
        // @ts-ignore
        // document.querySelector('#hero').scrollIntoView({behavior:smooth, block: "start", inline: "start"});
        // @ts-ignore
        // document.querySelector('#' + fragment).scrollIntoView({behavior:smooth, block: "start", inline: "start"});
        this._scrollTo('#' + fragment,0);
      } catch (e) { };
    });
  }

private _scrollTo(selector: any, yOffset = 0){
    const base = document.querySelector('#start-of-page');
    const el = document.querySelector(selector);
    // @ts-ignore
    const y = el.getBoundingClientRect().top - base.getBoundingClientRect().top; 
    window.scrollTo({top: y, behavior: 'smooth'});
  }

一种解决方案是创建一个相对于目标具有偏移量的不可见临时元素，滚动到它，然后删除它。这也许不是最理想的，但在我工作的环境中，其他解决方案对我不起作用。例如:

const createOffsetElement = (element) => {
    const offsetElement = document.createElement('div');
    offsetElement.style = `
        position: relative;
        top: -10em;
        height: 1px;
        width: 1px;
        visibility: hidden;
    `;
    const inputWrapper = element.closest('.ancestor-element-class');
    inputWrapper.appendChild(offsetElement);
    return offsetElement;
};

const scrollTo = (element) => {
    const offsetElement = createOffsetElement(element);
    offsetElement.scrollIntoView({
        behavior: 'smooth',
    });
    offsetElement.remove();
};

最简单的方法是，

html, body {
    scroll-behavior: smooth;
}

    html [id], body [id] {
        scroll-margin: 50px !important;
    }

使用您提供的代码

var pathArray = window.location.pathname.split( '/' );
var el = document.getElementById(pathArray[5]);
el.style.scrollMargin = '50px';
el.scrollIntoView(true);

2022纯js，平滑滚动，也适用于重新加载的内容

这是我对现代浏览器的解决方案:

document.addEventListener("click", e => {
   let anchorlink = e.target.closest('a[href^="#"]');
   
   if (anchorlink) {
      e.preventDefault();
      let hashval = anchorlink.getAttribute('href')
      let target = document.querySelector(hashval)
      const yOffset = -75;
      const y = target.getBoundingClientRect().top + window.pageYOffset + yOffset;
      window.scrollTo({ top: y, behavior: 'smooth' });
 
      history.pushState(null, null, hashval)
      e.preventDefault();
   }
})

click-eventlistener监听文档，因此您不必担心运行时加载或创建的实习链接(例如在wordpress中使用gutenberg)

希望能有所帮助;)

把我的解决方案留在这里，以防有人想达到和我一样的目标。

在我的例子中，错误或通知出现在提交后的页面顶部。(游戏邦注:对于几页滚动来说，页面有点长，在手机上则更长。)

我使用下面的代码片段将错误或通知滚动到视图中。

requestAnimationFrame (() = > errorOrNotification.scrollIntoView ({ Block: 'end'， behavior: 'smooth' }) ）;

Block: 'end'是窍门。根据文档::它反映了alignToTop: false场景。为了融合平滑滚动，我添加了相同的替换。

从本质上讲，它将尝试将元素的底部与可滚动祖先(在我的例子中是窗口)的可见区域的底部对齐。