JQuery ScrollTop 不滚动到正确的项目

Question

我正在尝试滚动到 div 容器内的项目。滚动到顶部功能有效，但似乎超出了该项目。

Javascript

<script>
$(document).ready(function () {
    var container = $('#directory'),
        scrollTo = $('.highlight_bg');
    container.animate({
        scrollTop: scrollTo.offset().top - container.offset().top + container.scrollTop()
    }, 2000);
});
</script>

HTML：

<div id="directory" class="directory" style="height: calc(100% - 111px)">
   <div class="directoryitem"></div>
   <div class="directoryitem"></div>
   <div class="directoryitem highlight_bg"></div>
   <div class="directoryitem"></div>
</div>

所以最后是滚动到类名highlight_bg的div项

不知道哪里出错了？

Answer 1

您的 Javascript 代码实际上正在运行。那么可能是 CSS 问题？

$(document).ready(function () {
    var container = $('#directory'),
        scrollTo = $('.highlight_bg');
    container.animate({
        scrollTop: scrollTo.offset().top - container.offset().top + container.scrollTop()
    }, 2000);
});

/* DEMO STYLISING PART */

.directoryitem {
  display: block;
  height: 90%;
  width: 90%;
  background-color: #CCC;
  border: 5px solid gray;
}
.highlight_bg {
  background-color: green;
}

/* SCROLL PART */

html, body {
  height: 100%;
  width: 100%;
}

.directory {
  position: relative;
  height: 100%;
  width: 100%;
  overflow: auto;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="directory" class="directory" style="height: calc(100% - 111px)">
   <div class="directoryitem"></div>
   <div class="directoryitem"></div>
   <div class="directoryitem highlight_bg"></div>
   <div class="directoryitem"></div>
</div>