Scroll if element is not visible

Question

how to determine, using jquery, if the element is visible on the current page view. I\'d like to add a comment functionality, which works like in facebook, where you only sc

Answer 1

Improving Loktar's answer, fixing the following:

1. Scroll up

2. Scroll to a display:none element (like hidden div's etc)

   function scrollToView(element){
       var offset = element.offset().top;
       if(!element.is(":visible")) {
           element.css({"visibility":"hidden"}).show();
           var offset = element.offset().top;
           element.css({"visibility":"", "display":""});
       }
   
       var visible_area_start = $(window).scrollTop();
       var visible_area_end = visible_area_start + window.innerHeight;
   
       if(offset < visible_area_start || offset > visible_area_end){
            // Not in view so scroll to it
            $('html,body').animate({scrollTop: offset - window.innerHeight/3}, 1000);
            return false;
       }
       return true;
   }
   

Answer 2

I made a slightly more generic version of digitalPBK's answer that minimally scrolls an element contained within a div or some other container (including the body). You can pass DOM elements or selectors to the function, as long as the element is somehow contained within the parent.

function scrollToView(element, parent) {
    element = $(element);
    parent = $(parent);

    var offset = element.offset().top + parent.scrollTop();

    var height = element.innerHeight();
    var offset_end = offset + height;
    if (!element.is(":visible")) {
        element.css({"visibility":"hidden"}).show();
        var offset = element.offset().top;
        element.css({"visibility":"", "display":""});
    }

    var visible_area_start = parent.scrollTop();
    var visible_area_end = visible_area_start + parent.innerHeight();

    if (offset-height < visible_area_start) {
        parent.animate({scrollTop: offset-height}, 600);
        return false;
    } else if (offset_end > visible_area_end) {
        parent.animate({scrollTop: parent.scrollTop()+ offset_end - visible_area_end }, 600);
        return false;

    }
    return true;
}

Answer 3

Live Demo

Basically you just check the position of the element to see if its within the windows viewport.

function checkIfInView(element){
    var offset = element.offset().top - $(window).scrollTop();

    if(offset > window.innerHeight){
        // Not in view so scroll to it
        $('html,body').animate({scrollTop: offset}, 1000);
        return false;
    }
   return true;
}