scroll to target

by Mr_Vasu

HTML

<ul>
<li>A</li>
<li>B</li>
<li>C</li>
<li>D</li>
<li>E</li>
<li id="target">F</li>
<li>G</li>
<li>H</li>
<li>I</li>
<li>J</li>
</ul>

CSS

ul {
    width: 100px;
    height: 100px;
    overflow: auto;
}

li {
    height: 40px;
}

li:nth-child(odd) {
    background: blue;        
}

li:nth-child(even) {
    background: red;
}

li#target {
    background: green;
}

JavaScript

$("ul").click(function() {
    var target = document.getElementById("target");
    target.parentNode.scrollTop = target.offsetTop;    
});