javascript - 跳动到具有偏移的部分

我正在使用小型jQuery脚本滚动到ID对应的部分，相应点击了标签的href。

例如，单击<a href="#section1">scroll to section1</a>后，用户窗口将进入带有动画的id="section1"的目标区域。

使用标准设置，一切都可以正常工作，但是在应用偏移之后，动画在滚动的最后阶段开始变得跳跃。

这是在线代码的一部分：
https://codepen.io/engray/pen/WMaXev

我尝试将偏移量值更改为预定义值，但是这完全没有帮助。您有什么想法，可能是什么导致动画跳动效果？

最佳答案

您不需要在headerHeight中添加targetOffest，因为导航栏是固定的：

var targetOffest = target.offset().top  + headerHeight

仅使用target.offset().top作为参数应该起作用。
注意：.animate() s scrollTop将使div的顶部滚动到页面顶部，您的代码使它在添加标题高度时滚动到导航栏的底部。

$('a[href*="#"]').click(function(e){
  e.preventDefault();
  var target = $(this.hash);
  target = target.length ? target : $('[name=' + this.hash.slice(1) + ']');
  var targetOffest = target.offset().top;
  var headerHeight = document.getElementByClassName('navbar')[0].offsetHeight;
  $('html, body').animate({
      scrollTop: targetOffest
  }, 1000);
});

.navbar {
  position: fixed;
  display: flex;
  width: 100%;
  left: 0;
  right: 0;
  top: 0;
  z-index: 3;
  background: rgba(0,0,0,0.3);
}

.navbar ul li{
  display: inline-block;
}

.navbar ul li a{
  color: white;
}

.section{
  width: 100%;
  height: 100px;
}

#section1{
  background: red;
}

#section2{
  background: blue;
}

#section3{
  background: green;
}

#section4{
  background: yellow;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<div class="navbar">
  <ul>
    <li><a href="#section1">s1</a></li>
    <li><a href="#section2">s2</a></li>
    <li><a href="#section3">s3</a></li>
    <li><a href="#section4">s4</a></li>
  </ul>
</div>
<div class="section" id="section1"></div>
<div class="section" id="section2"></div>
<div class="section" id="section3"></div>
<div class="section" id="section4"></div>

编辑1：

设置属性tabindex后，div将滚动到顶部，您可以使用.offset()和.scrollTo()再次设置滚动位置：

var x = $(window).offset().top,
    y = $(window).offset().left;
$target.attr('tabindex', '-1');
$target.focus();
$(window).scrollTo(x, y);

关于javascript - 跳动到具有偏移的部分，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/48986736/