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');
});