Question

I am trying to scroll to the top of a specific div container. Currently my code is instead scrolling the page content into view. Anybody has an idea how what’s wrong? : ) Here’s the code:

var openItem;

var showBox = function(item) {
    item.removeClass("loading");
    var infoBox = $("div.test", item);

    // Resize box
    item.width(853);
    item.height(infoBox.outerHeight());

    // Reload Masonry
    $('#container').isotope('reLayout');

    // Insert close button
    $('<a href="#" class="close">Close</a>"')
        .prependTo(".test .content")
        .click(function (e) {
            e.preventDefault();
            close(item);
        });

    // Insert close button
    $('<a href="#" class="close">Close</a>"')
        .appendTo(".test .content")
        .click(function (e) {
            e.preventDefault();
            close(item);
        });

    // Fade in test box
    setTimeout(function () {
        testBox.fadeIn();

        // Scroll box into view
        $(document).scrollTo(item, 1000);
    }, 280);
}

Answer 1

I believe I see your problem. Try replacing your setTimeout code with this:

// Fade in test box
setTimeout(function() {
    testBox.fadeIn(function() {
        // Scroll box into view
        $(document).scrollTo(item, 1000);
    });
}, 280);

The reason your original code wasn’t working before was because when $(document).scrollTo(item, 1000) was called item was not visible yet, so scrollTo didn’t know where the item was located.

EDIT in response to comment with the code example:

It looks like the bug you’re seeing is not by the showBox function you posted above. The problem is caused by elements with the class showMe getting hidden after the scrollTo function has been called. Try hiding the showMe elements as soon as the user clicks them instead of fading them out.