Javascript – Link to anchor on another page with smooth scrolling

anchorjavascriptjquerysmooth-scrolling

I have searched high and low for this answer but can't seem to find it.

I have anchors on the homepage with links in the top menu that scroll to them.

This works great on the homepage but on the sub-pages it doesn't work.

Below is my code:

$(document).ready(function(){
  // Add smooth scrolling to all links
  $("a").on('click', function(event) {

    // Make sure this.hash has a value before overriding default behavior
    if (this.hash !== "") {
      // Prevent default anchor click behavior
      event.preventDefault();
      event.stopPropagation();
      // Store hash
      var hash = this.hash;

      // Using jQuery's animate() method to add smooth page scroll
      // The optional number (800) specifies the number of milliseconds it takes to scroll to the specified area
      $('html, body').animate({
          scrollTop: $(hash).offset().top
        }, 2000, function(){

          // Add hash (#) to URL when done scrolling (default click behavior)
          window.location.hash = hash;
      });
    } // End if
  });
});

I have so far found that removing the event.preventDefault() line makes them work. But it stops the nice smooth scrolling effect.

What can be altered here so that I can have anchor links clicked on sub-pages that lead to the anchor section on the homepage with a smooth scroll ?

Best Answer

use return false; instead after scroll, and remove event.preventDefault & event.stopPropagation()

try below code:

$(document).ready(function() {
  // Add smooth scrolling to all links
  $("a").on('click', function(event) {

    // Make sure this.hash has a value before overriding default behavior
    if (this.hash !== "") {

      // Store hash
      var hash = this.hash;

      // Using jQuery's animate() method to add smooth page scroll
      // The optional number (800) specifies the number of milliseconds it takes to scroll to the specified area
      $('html, body').animate({
        scrollTop: $(hash).offset().top
      }, 2000, function() {

        // Add hash (#) to URL when done scrolling (default click behavior)
        window.location.hash = hash;
      });
      return false;
    } // End if
  });
});

Related Solutions

Javascript – How to refresh a page with jQuery

Use location.reload():

$('#something').click(function() {
    location.reload();
});

The reload() function takes an optional parameter that can be set to true to force a reload from the server rather than the cache. The parameter defaults to false, so by default the page may reload from the browser's cache.

Javascript – Smooth scrolling when clicking an anchor link

Update April 2018: There's now a native way to do this:

document.querySelectorAll('a[href^="#"]').forEach(anchor => {
    anchor.addEventListener('click', function (e) {
        e.preventDefault();

        document.querySelector(this.getAttribute('href')).scrollIntoView({
            behavior: 'smooth'
        });
    });
});

This is currently only supported in the most bleeding edge browsers.

For older browser support, you can use this jQuery technique:

$(document).on('click', 'a[href^="#"]', function (event) {
    event.preventDefault();

    $('html, body').animate({
        scrollTop: $($.attr(this, 'href')).offset().top
    }, 500);
});

And here's the fiddle: http://jsfiddle.net/9SDLw/

If your target element does not have an ID, and you're linking to it by its name, use this:

$('a[href^="#"]').click(function () {
    $('html, body').animate({
        scrollTop: $('[name="' + $.attr(this, 'href').substr(1) + '"]').offset().top
    }, 500);

    return false;
});

For increased performance, you should cache that $('html, body') selector, so that it doesn't run every single time an anchor is clicked:

var $root = $('html, body');

$('a[href^="#"]').click(function () {
    $root.animate({
        scrollTop: $( $.attr(this, 'href') ).offset().top
    }, 500);

    return false;
});

If you want the URL to be updated, do it within the animate callback:

var $root = $('html, body');

$('a[href^="#"]').click(function() {
    var href = $.attr(this, 'href');

    $root.animate({
        scrollTop: $(href).offset().top
    }, 500, function () {
        window.location.hash = href;
    });

    return false;
});

Best Answer

Related Solutions

Javascript – How to refresh a page with jQuery

Javascript – Smooth scrolling when clicking an anchor link

Related Topic