Can't get offset.top of element on subsequent pages

I want to have links within articles that can jump to a specified place in the article. (like < a href="#id">, so making a generic handler for that.

The html is being ajax loaded, so am using a live handler in order to process it. I am using an on click event that is located outside of page:init events, to avoid multiple triggers problem.

It works great for the first page loaded, but if I navigate to a second initialisation of the same page, it doesn’t work. The event receives the intended element id (scrollpoint), but the offset.top just returns as 0 (zero). It scrolls correctly if I manually enter a number in the scrollTop command.

So it is just a problem reading the offset.top of an element, when on subsequent initialisations of the same page in navigation after the first (they load different sections by ajax).

Very grateful for any advice!

<a class="scrollpage link" data-scrollpoint="#position1">Position 1</a>
<a class="scrollpage link" data-scrollpoint="#position2">Position 1</a>

<h1 id="position1"></h1>
<p id="position2"></p>



$$(document).on('page:init', function (e) {
    var page = e.detail;
    if page === 'pagename' {
         // can't put onclick here
    }
});

$$(document).on('click', '.scrollpage', function () {
     $$('.page-content').scrollTop($$(this.dataset.scrollpoint).offset().top - 60, '350');
});

I still haven’t managed to get any further with this…

When I have the same page initialised for a second time, trying to obtain the offset.top of an element (by id) just returns 0 (zero). The happens even if the id in question wasn’t on the first page, so is unique in the DOM.

Any ideas what could be going on, or what I could investigate?

Because apparently, the first page is still in dom, so your logic doesn’t work:

$$(document).on('click', '.scrollpage', function () {
     var $pageContent = $$(this).parents('.page-content');
     var $scrollPoint = $pageContent.find(this.dataset.scrollpoint);
     $pageContent.scrollTop($scrollPoint.offset().top - 60, 350);
});

Thanks so much, that solves the problem.

I need to try and learn why/how that works, as that’s just beyond my current understanding.

I think this might be similar to what I need to do for another problem that I’ll post separately: