(window).scrollTop function doesn't fire at first click

Question

I have a bar chart which is clickable, and when its clicked, it fires mainQuestBarClick function. In this function, I have this line $(window).scrollTop($('#scrollHere').offset().top); to scroll to scrollHere div. When I click to the bar, it doesn't scroll there but at second time I click it, it scrolls. What could be the reason?

Here is the function:

var mainQuestBarClick = function (event, pos, obj) {
        if (!obj)
            return;
        $(window).scrollTop($('#scrollHere').offset().top);
        //goToByScroll($("#scrollHere").attr("id")); 

        var selectedBranchName = encodeURIComponent(obj.series.label);
        $("#SelectedBranchFromBarChart").val(selectedBranchName);

        $("#content").block();

        //Stats Chart
        $.ajax({
            type: "GET",
            url: '@Url.Action("GetStatsForSpecificBranch", "SurveyReports")',
            data: "BranchName="+encodeURIComponent(obj.series.label)+"&SurveyId=" + $("#SurveyId").val() + "&startDate=" + $("#ReportStartDate").val() + "&endDate=" + $("#ReportEndDate").val(),
            cache: false,
            success: function (r) {
                if (r.success == false) {
                    noty({ text: r.resultText, type: 'error', timeout: 2000, modal: true });
                } else {


                    $("#statboxSurveyCountTitle").html("<b>" + selectedBranchName + "</b> Şubesi Anket Sayısı");
                    $("#statboxSurveyAvgTitle").html("<b>" + selectedBranchName + "</b> Şubesi Anket Ortalaması");
                    $("#statboxSurveyRecommTitle").html("<b>" + selectedBranchName + "</b> Şubesi Tavsiye Oranı")
                    $("#StatboxesDiv").show();
                    $("#SurveyCountVal").text(r.FilledSurveyCount);
                    $("#SurveyAvgVal").text(r.FilledSurveyAverageRating.toFixed(2));
                    $("#SurveyRecommVal").text("%"+r.RecommendYesPercent);
                }
            },
            error: function (error) {
                noty({ text: "Bir hata oluştu lütfen tekrar deneyiniz!", type: 'error', timeout: 2000, modal: true });
            }

        });
$("#content").unblock();

}

Answer 1

This is a late solution to this problem but somehow I managed to do what I want to do. Here is how I solved the problem:

I created a function which takes the id of the element to be scrolled:

function goToByScroll(id){
        @{int scroll = 600;
            if(Model.BranchList.Count <= 1)
            {
                scroll = 750;
            }
            }
        // Scroll
        $('html,body').animate({scrollTop:@scroll}, 1000);
    }

And changed this part in my code above in the question:

$(window).scrollTop($('#scrollHere').offset().top);

to this:

goToByScroll($("#scrollHere").attr("id"));