How to know if an element is visible on the screen. If not, scroll the page

Question

I'm trying to build a popup window like the one here. In this case, when I click the CUSTOMISE button, a window appears below the button. If the element is not entirely visible on the screen, the page scroll down or up until it is completely visible.

I was able to achieve half the result:

$('body').on('click',"#"+ID,function () {

        var $this = $(this);

        $('#attr-div-'+baseId).css({
            top: $this.position().top+55,
        }).show();
    });

How can I scroll the page until the element is entirely visible? Thanks!

Take a look at this answer http://stackoverflow.com/questions/6677035/jquery-scroll-to-element — SteWoo, Apr 09 '15 at 10:08

Shikkediel · Answer 1 · 2015-04-09T21:01:33.467

Something like this should work but a fiddle with the larger idea would be helpful :

$('body').on('click', "#"+ID, function() {

    var popup = $('#attr-div-'+baseId);
    var offset = $(this).offset().top+55;

    popup.css('top', offset).show();
    $(window).scrollTop(offset+popup.height()-$(this).height());
});

Assuming it doesn't have fixed position - if it's below the window then, you'd have to reposition it.

It could be refined (and animated as well of course instead of instantaneous) :

http://codepen.io/anon/pen/dPBNWY?editors=001

score 0 · Accepted Answer · answered Apr 09 '15 at 13:42

I have found the solution:

$('body').on('click',"#"+ID,function () {

        var $this = $(this);

        $('#attr-div-'+baseId).css({
            top: $this.position().top+55,
        }).show();

        $('html, body').animate({
            scrollTop: $('#attr-div-'+baseId).offset().top-55
        }, 1000);
    });

It is not exactly what I want, but it allows me to make the popup window always visible.

How to know if an element is visible on the screen. If not, scroll the page

2 Answers2