scroll to the vertical middle of a DIV

Question

i have a onepage design with some divs together. when i click on menu link ("3") i want to scroll to div #3 and it should be in the vertical middle of the screen.

i tried:

$('#go').click(function() {
$('html,body').animate({ scrollTop: $(.box).offset().top - ( $(window).height() -
$(.box).outerHeight(true) ) / 2  }, 200);
});

it doesn't work. what did i forgot?

here is a fiddle: http://jsfiddle.net/herrfischerhamburg/7CVtm/1/

If you check your console you should see you have errors in your script. It should be `$('.box')...` instead of `$(.box)`. — putvande, Dec 11 '13 at 09:21
Overflowed div, scroll to any contained element: http://stackoverflow.com/questions/2346011/how-do-i-scroll-to-an-element-within-an-overflowed-div With minor modification, instead of scrolling to an element you could grab the total height and divide by 2 — gordon, Jul 13 '16 at 15:26

score 3 · Accepted Answer · answered Dec 11 '13 at 09:22

3

You need to wrap your selectors in quotes: $('.box')

$('#go').click(function (e) {
    e.preventDefault();
    var $box = $('.box').eq(2); // select the third box

    $('html, body').animate({
        scrollTop: $box.offset().top - ($(window).height() - $box.outerHeight(true)) / 2
    }, 200);
});

Updated fiddle

answered Dec 11 '13 at 09:22

Rory McCrossan

306,214
37
269
303

awesome! and when i have a menu and i want to targt every DIV with a link? now it works only with #3. sorry, i think my question was not precise enough ... . many thx anyway :) – Dec 11 '13 at 10:06
1

No problem, you just need to change the value in the `eq` function to target the required div. – Rory McCrossan Dec 11 '13 at 10:08
hmm, now he wants the "active" menu to be styled. any idea how to build this "scroll to middle" function into this? -> http://jsfiddle.net/mekwall/up4nu/ i tried but i don't get it, think it' too much for me as a jquery novice ... – Dec 11 '13 at 10:52
now i have this: [link](http://jsfiddle.net/herrfischerhamburg/7CVtm/7/). and some questions: - how to make the script "smarter"? i thinks it's too big. - how to make that only the most top DIV makes the related menu link active (green)? – Dec 11 '13 at 12:16
1

You can use data attributes to tidy that code up massively. Try this: http://jsfiddle.net/7CVtm/9/ – Rory McCrossan Dec 11 '13 at 13:17
this looks MUCH better, but when i give the DIVs a height of 700px (so that there is only one DIV visible at a time) than the active menu won't change colour anymore ... :-/ – Dec 11 '13 at 13:44
okay it checks if the whole ".box" div is visible, but i have to chek if the "anchor" inside the ".box" div is visible. or i have to check if the TOP of a ".box" is visible and then add some pixels like "+50" ore something ... – Dec 11 '13 at 14:18
1

That's just a logic change in the `isElementVisible` function: http://jsfiddle.net/7CVtm/10/ – Rory McCrossan Dec 11 '13 at 14:29
hmmm ... i think i need more of a "scrollspy" to check if a DIV is in height of the menu. – Dec 11 '13 at 14:57
@McCrossan: many thanks for your help! i made it with your code and added twitter bootstrap scrollspy. one question: how to get bootstrap scrollspy working in jsfiddle? [link]http://jsfiddle.net/herrfischerhamburg/cD6aw/ ... i don't know how to add "data-spy="scroll" data-offset="200" data-target="#myScrollspy"" to the body ... ( i tried "fiddle options ...). – Dec 11 '13 at 15:50

scroll to the vertical middle of a DIV

1 Answers1