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>