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问题？

＆＃13;

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

＆＃13;

/* 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;
}

＆＃13;

<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>

＆＃13;

JQuery ScrollTop不会滚动到正确的项目

1 个答案: