I have a page with working anchors like these:
<a class="nav-link" href="#ta-services">Leistungen</a>
...
<section class="border-top" id="ta-services">
On another page, I want to link to the first page at the same anchors position. In my understanding, that should be possible with plain html:
<a class="nav-link" href="index.html#ta-services">Leistungen</a>
However, the link works just like a normal link to index.html, the page does not scroll down. Example online at http://elisabethzenz.at/impressum_datenschutz.html. Link in the upper right named "Leistungen".
The website is based on a bootstrap template, it might be some interference with the full screen header image – I would appreciate any hints how to solve the issue!
On the post edit screen, scroll down to the 'Table of Contents' tab below the editor. From here, you can check the 'Insert table of contents' option and select the headings you want to include as anchor links. You can now save your changes and preview your article.
You have a sizeable amount of JS that's delaying the loading of the page. The browser looks for the #ta-services
on initial load and doesn't see it, so it stops.
You need to use JS to scroll to the position after everything has finished loading. You can do this with some JS that looks like this:
document.getElementById('id').scrollIntoView({
behavior: 'smooth'
});
Put this in your JS to run after the page has loaded. If you don't already have something like that, you can use:
document.addEventListener('DOMContentLoaded', function(event) {
// Scroll into view code here
});
Based on Caleb Anthony's answer:
You can scroll to #ta-services
using JavaScript after the page loads:
document.addEventListener('load', function(event) {
document.getElementById('ta-services').scrollIntoView({behavior: 'smooth'});
});
The difference between load
and DOMContentLoaded
events is explained here as
The load event is fired when the whole page has loaded, including all dependent resources such as stylesheets and images. This is in contrast to DOMContentLoaded, which is fired as soon as the page DOM has been loaded, without waiting for resources to finish loading.
Thus, when DOMContentLoaded
event fires, the positions of elements are not final.
The native navigation to fragment works correctly. You have some JavaScript that scrolls the page to top when the URL has a hash component.
In assets/js/theme.js
around line 702
:
var hash = window.location.hash;
if (hash && document.getElementById(hash.slice(1))) {
var $this = $(hash);
$('html, body').animate({
scrollTop: $this.offset().top - $("a[href='" + hash + "']").data('offset')
}, 400, 'swing', function () {
window.history.pushState ? window.history.pushState(null, null, hash) : window.location.hash = hash;
});
}
$("a[href='" + hash + "']").data('offset')
returns undefined,
so scrollTop: NaN
= scrollTop: 0
You could just remove all that code, and it will work.
Or make sure that operation doesn't return NaN:
scrollTop: $this.offset().top - ($("a[href='" + hash + "']").data('offset') || 0)
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With