jquery - Goto element ID (which is created by jquery) on page

Question

I am having an issue here: I have a URL like so:

products.php?community=2#1855

and I have an element like so:

<div id="1855"></div>

the element with the id 1855 is being created by jquery.

Anyways, when I load this page, the page does not goto that id. is this due to the fact that element is created by jquery? If so, does anyone know of away I can goto that id after it was created?

I tried this:

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

but got this error:

Uncaught TypeError: Cannot read property 'top' of undefined

try this http://stackoverflow.com/questions/4565381/scrolltop-jquery-scrolling-to-div-with-id ? — Dhiraj, Jul 22 '15 at 20:27
I am adding the element to dom via `$('#listings').html(html);` — user979331, Jul 22 '15 at 20:28

score 0 · Answer 1 · answered Jul 22 '15 at 20:31

0

It seems that selector could not find an element. You need to animate scrollTop after adding the new element. Something like this:

$('#listings').html(html);
$("html, body").animate({ scrollTop: $('#1855').offset().top }, 1000);

answered Jul 22 '15 at 20:31

Tomasz

106
1
7

score 0 · Answer 2 · answered Jul 22 '15 at 20:32

What happens is that the url:

products.php?community=2#1855

It is generated before the jQuery object exists, one way you can prove that it works is to do this:

setTimeout(function(){
    $("html, body").animate({ scrollTop: $('#1855').offset().top }, 1000);
},500);

This will make the jQuery object exists when you run this function.

Note: This example is for you to try.

Collin Dauphinee · Answer 3 · 2015-07-22T20:54:20.130

If your document is being populated dynamically, I think the best solution would be add some code to check if the element referenced by the anchor was created whenever you add a new element, and scroll to it once it's there.

If this isn't possible, another solution is to hook into the DOM change event and check if the element referred to in the anchor exists. This isn't reliable on old browsers (including IE9), however.

navigatedToAnchor = false;
$(document).on('DOMSubtreeModified', function () {
    var anchorIndex = document.URL.lastIndexOf('#');
    if (!navigatedToAnchor && anchorIndex !== -1) {
        var anchorSelector = document.URL.substring(anchorIndex);
        var anchorElement = $(anchorSelector);
        if (anchorElement.length > 0) {
            $('html, body').animate({ scrollTop: anchorElement.offset().top }, 1000);
            navigatedToAnchor = true;
        }
    }
});

score 0 · Answer 4 · answered Jul 22 '15 at 20:42

it seems that you have a DOM readiness issue.

The first thing to do would be to wrap your line to scroll:

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

like this:

$(document).ready(function(){
/* dom is ready, scroll here */
$("html, body").animate({ scrollTop: $('#1855').offset().top }, 1000);
})

jquery - Goto element ID (which is created by jquery) on page

4 Answers4