Scrolling a DIV to Specific Location

Question

There is a plethora of similar questions around but none of them seem to be looking for what I'm looking for, or else none of the answers are useful for my purposes.

The jsfiddle: http://jsfiddle.net/tumblingpenguin/9yGCf/4/

The user will select an option and the page will reload with their option applied. What I need is for the "option list" DIV to be scrolled down to the selected option such that it is in the center of the option list.

The HTML...

<div id="container">
    <a href="#">
        <div class="option">
            Option 1
        </div>
    </a>
    <!-- other options -->
    <a href="#">
        <div class="option selected"> <!-- scroll to here -->
            Option 4
        </div>
    <!-- other options -->
    <a href="#">
        <div class="option">
            Option 7
        </div>
    </a>
</div>

The selected option is marked with the selected class. I need to somehow scroll the DIV down to the selected option.

The CSS...

#container {
    background-color: #F00;
    height: 100px;
    overflow-x: hidden;
    overflow-y: scroll;
    width: 200px;
}
a {
    color: #FFF;
    text-decoration: none;
}
.option {
    background-color: #c0c0c0;
    padding: 5px;
    width: 200px;
}
.option:hover {
    background-color: #ccc;
}
.selected {
    background-color: #3c6;
}

I've seen this done on other websites so I know it's possible—I just haven't a clue where to begin with it.

PS jQuery solutions are acceptable.

Answer 1

Something like this http://jsfiddle.net/X2eTL/1/ :

// On document ready
$(function(){
    // Find selected div
    var selected = $('#container .selected');
    // Scroll container to offset of the selected div
    selected.parent().parent().scrollTop(selected[0].offsetTop);
});

Without the jQuery (put this at the bottom of the < body > tag:

// Find selected div
var selected = document.querySelector('#container .selected');
// Scroll container to offset of the selected div
selected.parentNode.parentNode.scrollTop = selected.offsetTop;

demo: http://jsfiddle.net/66tGt/

Answer 2

Since you said JQuery answers are acceptable, here's an example of what you're looking for:

$('body, html').animate({ scrollTop: div.offset().top-210 }, 1000);

Replace div for whatever element you want to scroll to.

Answer 3

Here is one possible solution that may work for you:

Demo Fiddle

JS:

$('#container').scrollTop( $('.selected').position().top );

Answer 4

Take a look at this fiddle : http://jsfiddle.net/9yGCf/8/

As requested it scrolls to the middle of the div (you can change the offset by however much you want to make little adjustments). I would probably suggest setting either a line height with some padding and whatnot and then do the math to change the offset that I have at -40 so that it does put it in the middle.

But I used jquery and came up with this quick little code... also added some code to change the selected option

$('.option').click(function(){
    $('.selected').removeClass('selected');
    $(this).addClass('selected');
    $(this).parent().parent().scrollTop(selected[0].offsetTop - 40);
});

Answer 5

This magical API will automatically scroll to the right position.

element.scrollIntoView({ block: 'center' })

See more details:

https://developer.mozilla.org/en-US/docs/Web/API/Element/scrollIntoView