JavaScript scrollIntoView 平滑滚动和偏移

Question

我的网站有以下代码:

function clickMe() {
  var element = document.getElementById('about');
  element.scrollIntoView({
    block: 'start',
    behavior: 'smooth',
  });
}

这工作得很好，但我有一个固定的标题，所以当代码滚动到元素时，标题会妨碍。

有没有办法让其偏移并使其平滑滚动？

Answer 1

Is there a way to have an offset and make it scroll smoothly?

#是的，但不能使用scrollIntoView()

Element.scrollIntoView() 的 scrollIntoViewOptions 不允许允许您使用偏移量。仅当您想要滚动到元素的精确位置时，它才有用。

但是您可以使用 Window.scrollTo()可以选择滚动到偏移位置并平滑滚动。

例如，如果您的标题高度为 30px，您可以执行以下操作:

function scrollToTargetAdjusted(){
    var element = document.getElementById('targetElement');
    var headerOffset = 45;
    var elementPosition = element.getBoundingClientRect().top;
    var offsetPosition = elementPosition + window.pageYOffset - headerOffset;
  
    window.scrollTo({
         top: offsetPosition,
         behavior: "smooth"
    });
}

这将平滑地滚动到您的元素，这样它就不会被标题挡住。

注意:您减去偏移量是因为您想在将标题滚动到元素上之前停止。

#查看实际效果

您可以在下面的代码片段中比较这两个选项。

<script type="text/javascript">
  function scrollToTarget() {

    var element = document.getElementById('targetElement');
    element.scrollIntoView({
      block: "start",
      behavior: "smooth",
    });
  }

  function scrollToTargetAdjusted() {
        var element = document.getElementById('targetElement');
      var headerOffset = 45;
        var elementPosition = element.getBoundingClientRect().top;
      var offsetPosition = elementPosition + window.pageYOffset - headerOffset;
      
      window.scrollTo({
          top: offsetPosition,
          behavior: "smooth"
      });   
  }

  function backToTop() {
    window.scrollTo(0, 0);
  }
</script>

<div id="header" style="height:30px; width:100%; position:fixed; background-color:lightblue; text-align:center;"> <b>Fixed Header</b></div>

<div id="mainContent" style="padding:30px 0px;">

  <button type="button" onclick="scrollToTarget();">element.scrollIntoView() smooth, header blocks view</button>
  <button type="button" onclick="scrollToTargetAdjusted();">window.scrollTo() smooth, with offset</button>

  <div style="height:1000px;"></div>
  <div id="targetElement" style="background-color:red;">Target</div>
  <br/>
  <button type="button" onclick="backToTop();">Back to top</button>
  <div style="height:1000px;"></div>
</div>

编辑

添加了

window.pageYOffset，以修复与@coreyward评论相关的问题