jQuery scroll body to display element

Question

I have a some <div> with contents and a <body> which is vertically scrollable.

If whole div is currently visible in browser view-port, I don't wish to do anything.

If div is partially visible and only upper part visible, I wish to scroll the body downward to display the whole div.

If div is partially visible and only lower part visible, I wish to scroll the body upward to display the whole div.

How to do this using jQuery?

How to calculate if div is partially or fully visible?
How to calculate scroll direction and amount to scroll if div is partially visible?

Note: Ignore the case when the height of the div is greater than browser view-port height.

have you tried to make a content div with a innerDiv where you say content overflow hidden ? — Dwza, Feb 20 '14 at 10:09
$('html, body').animate({ scrollTop: content.offset().top }, 1000); — Dusan, Feb 20 '14 at 10:09
possible duplicate of [jQuery scroll To Element](http://stackoverflow.com/questions/6677035/jquery-scroll-to-element) — Alessandro Vendruscolo, Feb 20 '14 at 10:22
@Dusan I did read the question, and even answered it. But my answer was already there in the question I linked above. By the way, if you just scroll to the position returned by `offset` you're done, because it will cover all the cases you listed. — Alessandro Vendruscolo, Feb 20 '14 at 11:39
@Alessandro If you scroll to position returned by 'offset' you will end up with element top aligned with window top. If the whole element is already visible, there is no need to scroll anything - scrolling it with your method and aligning tops is the stupidest thing ever for user experience! — Dusan, Feb 20 '14 at 12:12

score 1 · Accepted Answer · answered Feb 20 '14 at 10:13

Without seeing what code you've already tried it's very difficult to give you a definitive answer.

There are a number of plugins available which you could use. I've used (and built upon) jquery-visible a couple of times with great success.

If writing from scratch is more your thing, you can use jQuery's .position() (link here) and .offset() (link here) to identify whether an element is on-page or not (you can also use position combined with the elements height/width to see if it's completely on-screen or not at any one point).

That's essentially exactly what the jquery-visible plugin does anyway!

Thank you for your effort! Your guidelines is how I finally solved the problem. — Dusan, Feb 20 '14 at 10:55

score 0 · Answer 2 · answered Feb 20 '14 at 10:52

Here is how I did it, probably done by many others countless number of times, but I could not find such and not so-hard snippet. That is why asked a question here.

function smartBringToView(elem, margin) {
    // Get viewport data
    var body = $('html, body');
    var bodyY1 = $(body).scrollTop();
    var bodyY2 = bodyY1 + $(window).height();

    // Get element data
    var elemY1 = elem.offset().top - margin;
    var elemY2 = elem.offset().top + elem.height() + margin;

    // Perform scroll
    var deltaY1 = elemY1 - bodyY1;
    var deltaY2 = elemY2 - bodyY2;
    if (deltaY1 < 0) { // Upper part off screen
        body.animate({ scrollTop: bodyY1 + deltaY1 }, deltaY1 * 3);
        return;
    }
    if (deltaY2 > 0) { // Lower part off screen
        body.animate({ scrollTop: bodyY1 + deltaY2 }, deltaY2 * 3);
        return;
    }
}

jQuery scroll body to display element

2 Answers2