scroll page to div

Question

i Need to scroll to div but i don't need the div to be on top of page after scrolling

i need it to be in of page how do i do that to be in center of the page.

i see many question that make the scrolling right but to top of page i need it to scroll but make the div in center of the page.

i've tried this but this scroll it to top of the page

$('html,body').animate({
    scrollTop: $("#"+div).offset().top},
'slow');

thanks

How to scroll to specific item using jQuery? is scroll to div but make it at top of page not at center

I don't think its a duplicate. He knows how to scroll to an item, he wants to modify the exact scroll amount so that the item is centered in the window ("scroll into view") rather than at the top of the window ("scroll to top") — Draco18s no longer trusts SE, Dec 23 '15 at 21:21
exactly i need it to scroll the div to center of the page not to top — Alaa M. Jaddou, Dec 23 '15 at 21:26
Then you need to add half the height of the window and subtract half the height of the div. — m69's been on strike for years, Dec 24 '15 at 03:08

score 5 · Accepted Answer · answered Dec 23 '15 at 21:20

5

In order for the div to be centered in the window after scrolling you would need to:

Query the browser's window height (this is doable)
Query the div's height (this is doable, though you need to be careful: height is not always accurately calculated)
Subtract Line 2 from Line 1, then divide by 2
Add the result from Line 3 to your top value

Note: When your div is taller than the browser window, it will still be centered, but the top of the div will be off the screen!

answered Dec 23 '15 at 21:20

Draco18s no longer trusts SE

15,628
3
36
56

i thinks it's logicaly right :) thanks for your time my friend – Alaa M. Jaddou Dec 23 '15 at 21:30
1

Actually logically its perfect. Just saw we posted same answer. +1. Great minds think alike. =] – AtheistP3ace Dec 23 '15 at 21:32
1

I was just too burnt out from my own 5-hour wrestle with jQuery UI to want to write any of the *code* to do this. – Draco18s no longer trusts SE Dec 23 '15 at 21:36

score 2 · Answer 2 · answered Dec 23 '15 at 21:24

Here is an example centering div2: https://jsfiddle.net/2mb44kfa/

HTML:

<div id="div1">
</div>
<div id="div2">
</div>
<div id="div3">
</div>

CSS:

#div1,
#div3 {
    height: 1000px;
}

#div2 {
    height: 100px;
    background: red;
}

JS:

var winHeight = $(window).height();
var divHeight = $("#div2").height();
var height = (divHeight - winHeight) / 2
$('html, body').animate(
    {
        scrollTop: ($("#div2").offset().top + height) + 'px'
    }, 'slow'
);

scroll page to div

2 Answers2