滚动到应该通过Ajax加载的元素ID（无限滚动）

Question

So, I have two pages, notifications and topic . Topic page has comments, every comment has an unique id. When user presses on the comment link in the notifications page it takes him to the topic page that is scrolled to the exact comment user pressed on. The link after that looks something like topic/titleoftopic#comment_627 . It worked pretty good, but now, when I have added infinite scroll and started showing only first few comments (rest of it is loaded on the scroll to bottom) it won't scroll to the comment and I receive an error in the console Uncaught TypeError: Cannot read property 'top' of undefined , obviously this is because the comment is not loaded yet. Is there any way to make it work? I have an idea - start scrolling to the bottom until it finds the exact comment, but not sure how to implement this. Here is my code on how do I make it scroll:

//Scroll to the comment from notifications
$(document).ready(function() {
$('html, body').hide();

if (window.location.hash) {

    $('html, body').scrollTop(0).show();
    $('html, body').animate({
        scrollTop: $(window.location.hash).offset().top
    }, 800);

} else {
    $('html, body').show();
}
});

Thanks everyone for any advice or suggestion!

Answer 1

For dynamically added items you have to find that id from whole document.

$(document).ready(function () {
            $('html, body').hide();
            if (window.location.hash) {
                $('html, body').scrollTop(0).show();
                $('html, body').animate({
                    scrollTop: $(document).find(window.location.hash).offset().top
                }, 800);
            } else {
                $('html, body').show();
            }
        });