JavaScript to scroll element into view

In AJAX applications, there are frequent needs to scroll some element into view after some modification to the page. For example, after adding an item or updating an element in an admin panel, the page may need to be scrolled to the item added or updated so that we can see the changes immediately.

In these cases, JavaScript can be used to scroll the element we want to show. In Vanilla JavaScript, there is no built-in function which can achieve scroll_element_into_view(), but most of modern browsers provide function like window.scrollTo() which can scroll the page to some position. 

window.scrollTo() scrolls to a particular set of coordinates in the document. It takes two parameters (x, y).

• x-coord is the pixel along the horizontal axis of the document that you want displayed in the upper left.
• y-coord is the pixel along the vertical axis of the document that you want displayed in the upper left.

The above function can be used to achieve what we want in an indirect manner. The only thing we need to know is the position of the element which needs to be scrolled into the view. To get the position. A simple and modern function is element.getBoundingClientRect(). 

The returned value is a DOMRect object, which contains read-only left, top, right and bottomproperties describing the border-box in pixels. top and left are relative to the top-left of the viewport.

A workable scroll into view solution with above functions is :

var rect = document.getElementById("target_container").getBoundingClientRect();
window.scrollTo(rect.left, rect.top);

But there is some problem with this solution if we refresh the page and the element is already in the view before the page is refreshed.

JavaScript provides another property offsetLeft, offsetTop to calculate the position of an element to its offsetParent. By recursively calling the offsetTop, offsetLeft and offsetParent, one can get the top and left position of an element relative to the document(This is the most frequent used method nowadays). 

function getOffsetTop(elem){
    var offsetTop = 0;
    do {
      if(!isNaN(elem.offsetTop)){
          offsetTop += elem.offsetTop;
      }
    } while( elem = elem.offsetParent );
    return offsetTop;
}

function getOffsetLeft(elem){
    var offsetLeft = 0;
    do {
      if(!isNaN(elem.offsetLeft)){
          offsetLeft += elem.offsetLeft;
      }
    } while( elem = elem.offsetParent );
    return offsetLeft;
}

The above two functions will return the top and left position of the element relative to the document.body element. With the above method, we can also scroll an element into view.

var offsetTop = getOffsetTop(document.getElementById("target_container"));
var offsetLeft = getOffsetLeft(document.getElementById("target_container"));
window.scrollTo(offsetLeft, offsetTop);

This solution will work in most browsers and work always.

If you are using jQuery, there is some convenience function to achieve this.

$('html,body').animate({
	scrollTop: $("#target_container").offset().top
}, 500);

The above solution will provide some animation to scroll the element into view. Basically, it uses the same logic as the Vanilla JavaScript.