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.

P.S. jQuery solutions are acceptable.

Will they initially select an option from that list? If so, then do you want to do a whole page reload to load information from the selected div? You ever think about using an unordered list for this? — Adjit, Feb 24 '14 at 16:04
Is this of any help? http://stackoverflow.com/questions/2346011/ — HJ05, Feb 24 '14 at 16:07

score 5 · Accepted Answer · edited Mar 13 '16 at 14:56

5

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/

edited Mar 13 '16 at 14:56

ArnonZ

3,822
4
32
42

answered Feb 24 '14 at 16:11

Goran.it

5,991
2
23
25

This works but it didn't center the selected option. I updated to this http://jsfiddle.net/X2eTL/2/ and it's now doing exactly what I need (I changed it to `selected[0].offsetTop - 45`). Thanks! – Jason Feb 24 '14 at 16:19

score 3 · Answer 2 · answered Feb 24 '14 at 16:07

3

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.

answered Feb 24 '14 at 16:07

Joao

321
2
6

score 2 · Answer 3 · answered Feb 24 '14 at 16:15

2

Here is one possible solution that may work for you:

Demo Fiddle

JS:

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

answered Feb 24 '14 at 16:15

badAdviceGuy

2,060
1
16
12

score 1 · Answer 4 · answered Feb 24 '14 at 16:17

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);
});

score 0 · Answer 5 · answered Jan 08 '21 at 14:22

0

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

answered Jan 08 '21 at 14:22

weiya ou

2,730
1
16
24

Scrolling a DIV to Specific Location

5 Answers5