Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Link with anchor to different page (href)

Tags:

html

href

anchor

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!

like image 456
Markus Proske Avatar asked Jan 12 '20 17:01

Markus Proske


People also ask

How do you add an anchor link to jump to a specific part of a page in Wordpress?

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.


3 Answers

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
});
like image 95
Caleb Anthony Avatar answered Oct 16 '22 12:10

Caleb Anthony


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.

like image 3
Burak Gök Avatar answered Oct 16 '22 11:10

Burak Gök


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)
like image 2
mdker Avatar answered Oct 16 '22 10:10

mdker