使用 jQuery 滚动到锚点仅在您不在当前页面上时才有效

Question

The issue is that when I click a link that has a hashtag that's on the same page, the animated scroll doesn't work. The animated scroll only works when you're not on the current page.

The urls look something like this:

• website.com/about#people,
• website.com/about#contact

So let's say you're on the the "about page" and were to click on the either of those links, the scroll down animation won't work, but let's say you're on the home page and click on any of those links, the animation does work.

Unfortunately I can't replicate that issue on the snippet, but i'm using the same js code. The weird thing is that on this snippet the animation does work even though you're the same page. And no, I'm not getting any errors on the console.

Thanks!

 $('nav a[href^="#"]').click(function(){ $('html, body').animate({ scrollTop: $(this.hash).offset().top }, 400); return false; });

 #topSection{ background: red; height: 400px; } #middleSection{ background: blue; height: 400px; } #lastSection{ background: black; height: 400px; }

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <nav> <ul> <li><a href="#topSection">Top Section</a></li> <li><a href="#middleSection">Middle Section</a></li> <li><a href="#lastSection">Last Section</a></li> </ul> </nav> <div id="topSection"> </div> <div id="middleSection"> </div> <div id="lastSection"> </div>

Answer 1

The reason why the scroll to hash does not work when you visit a page with a hash, is because your code is only invoked when a link is clicked. To further elabourate on my comment, you will therefore need to also invoke the same code when the page is loaded.

This can be done by simply abstracting all your logic in the click handler into a function that can be invoked independently of the click event:

function smoothScrollTo(hash) {
  if (!hash)
    return;

  $('html, body').animate({
    scrollTop: $(hash).offset().top
  }, 400);
}

$(function() {
  // Smooth scrolling when the page is loaded
  smoothScrollTo(window.location.hash);

  // Smooth scrolling when a link is clicked
  $('nav a[href^="#"]').click(function() {
    smoothScrollTo(this.hash)
    return false;
  });
});

See proof-of-concept below:

 function smoothScrollTo(hash) { if (!hash) return; $('html, body').animate({ scrollTop: $(hash).offset().top }, 400); } $(function() { // Smooth scrolling when the page is loaded smoothScrollTo(window.location.hash); // Smooth scrolling when a link is clicked $('nav a[href^="#"]').click(function() { smoothScrollTo(this.hash) return false; }); });

 #topSection { background: red; height: 400px; } #middleSection { background: blue; height: 400px; } #lastSection { background: black; height: 400px; }

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <nav> <ul> <li><a href="#topSection">Top Section</a></li> <li><a href="#middleSection">Middle Section</a></li> <li><a href="#lastSection">Last Section</a></li> </ul> </nav> <div id="topSection"> </div> <div id="middleSection"> </div> <div id="lastSection"> </div>