CODEWITHSUNDEEP
htmlanchorhref
Markus Proske
Markus Proske

Reputation: 3364

Link with anchor to different page (href)

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!

Upvotes: 8

Views: 6866

Answers (9)

foreza
foreza

Reputation: 46

When I removed all of your JS, it works as intended. I commented out all of your preloaders, scripts, bootstrap, etc. Most of what people are suggesting here has already been done there, so I believe you're good on that front. Your anchor link works when we take the JS out of the picture.

We know the problem is one of the libraries/scripts you are using, so that's one step closer.

Could we sequentially start drilling down to the issue by removing the likely culprits (like your lazy loaders?) one at a time?

Upvotes: 1

David Clews
David Clews

Reputation: 906

Use the built in scrolling functionality of anchor.

page1.html

<a href="page2.html#Anchorname">go to page 2</a>
<a name="Anchorname"></a>

page2.html

<a href="page1.html#Anchorname">goto page 1</a>
<a name="Anchorname"></a>

Upvotes: 0

mdker
mdker

Reputation: 1404

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)

Upvotes: 2

Hackinet
Hackinet

Reputation: 3348

I noticed you have jQuery.

You can add this code snippet just before your body tag closes.

<script> 
    $('html,body').animate({scrollTop: $(window.location.hash).offset().top});
</script>

Upvotes: 1

Hiren
Hiren

Reputation: 113

@Markus Proske below script will help you. Script of navbar to jump to respective section form the another page

Here i have define navigation script.

$('.nav-link').on('click', function (event) {
    var $anchor = $(this);
     $('html, body').stop().animate({
      scrollTop: $($anchor.attr('href')).offset().top
     }, 1500, 'easeInOutExpo');
     event.preventDefault();
});

For Example here i have given navigation structure, i.e,

 <!-- Homepage "index.html"--> 
  <nav id="menu">
    <ul id="menu-main-menu" class="menu menu-main">
      <li class="nav-link"> <a href="#home"><span>Home</span></a> </li> <!-- index.html -->      
      <li class="nav-link"> <a href="about-us.html"><span>About Us</span></a> </li> <!-- separate page -->
      <li class="nav-link"> <a href="#contact"><span>Contact Us</span></a> </li>            
    </ul>
  </nav>

  <!-- Homepage has below sections "index.html"-->
  <section id="home"></section>
  <section id="contact"></section>


 <!-- About-Us Page -->
  <nav id="menu">
    <ul id="menu-main-menu" class="menu menu-main">
      <li class="nav-link"> <a href="index.html#home"><span>Home</span></a> </li> <!-- index.html -->      
      <li class="nav-link"> <a href="about-us.html"><span>About Us</span></a> </li>            
      <li class="nav-link"> <a href="index.html#contact"><span>Contact Us</span></a> </li>
    </ul>
  </nav>

Upvotes: 2

Shyam
Shyam

Reputation: 792

It is working as expected but...

#link is working as expected. The browser is actually scrolling the page to the given id but instantly scrolling document to the top. May be some of your JS code is scrolling your page to top.

If you open this page and keep eye on the scrollbar than you can notice the scrollbar behavior. It first scrolled to the given id i.e. #ta-services and at the same time moving scrollbar to the top.

You need to find out JS code which is causing this issue.

Upvotes: 1

Burak G&#246;k
Burak G&#246;k

Reputation: 340

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.

Upvotes: 3

Farhan
Farhan

Reputation: 253

Add following script code & update html code of the navigation link for "Leistungen" menu 

$(document).on('click',"#goto-services",function(e) {
    e.preventDefault();
    $('html, body').animate({
        scrollTop: $("#ta-services").offset().top
    }, 'slow');
});
<a class="nav-link" href="#ta-services" id="goto-services">Leistungen</a>

Upvotes: 1

Caleb Anthony
Caleb Anthony

Reputation: 1123

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

Upvotes: 6

Related Questions