Scrolling to make div visible

Question

I am trying to make it so that the fullcalendar scheduler scrolls to the area a person clicks on, and this code works somewhat, but depending on the screen size, the actual area it should zoom to is often scrolled past, and is not visible within the window.

Is there a way to ensure that the table header cell's left border is aligned with the window's left border?

In the view, there is a horizontal scrolling table inside a div $('.fc-time-area.fc-widget-header .fc-scroller'), and the cell I want visible can be found with something like this: $(".fc-time-area.fc-widget-header .fc-content th[data-date='2017-2-11T10:00:00']")

var centerTime = function (day) {
    $('.fc-time-area.fc-widget-header .fc-scroller').animate({
        scrollLeft: $(".fc-time-area.fc-widget-header .fc-content").find("th[data-date='" + day + "']").offset().left
    }, 750);
};

Answer 1

I figured it out. Apparently there is a difference between using offset() and position(). By changing that simple thing, it works great now.

var centerTime = function (day) {
    $('.fc-time-area.fc-widget-header .fc-scroller').animate({
        scrollLeft: $(".fc-time-area.fc-widget-header .fc-content").find("th[data-date='" + day + "']").offset().left
    }, 750);
};