JQuery ScrollTop scrollt nicht zum richtigen Element

Question

Ich versuche, zu einem Element innerhalb eines div-Containers zu blättern. Die Scroll-to-Top-Funktion funktioniert, scheint jedoch den Gegenstand zu überstrahlen.

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> 

So ist das Ende mit Klassennamen zum div Artikel blättern highlight_bg

nicht sicher, wo falsch werde?

Answer 1

Ihr Javascript-Code funktioniert tatsächlich. Also vielleicht ein CSS-Problem?

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