[Resolved] EASY SMOOTH SCROLL LINKS

[Daniel]

I have installed easy smooth scroll link add on and it does not seem to be working with generate press theme I have my page set up as sections see http://perfekttension.com/perfekt-tension/

Is there a way to smooth scroll to anchors?

My anchors are on the menu to the section on the page I am not sure if this is issue with the plug in or not

Is there a way to add smooth scroll to the anchor?

[Roberto Enrique]

Place this in your wp-footer hook

<script>
// smooth scrolling thanks to https://css-tricks.com/snippets/jquery/smooth-scrolling/

jQuery(function() {
  jQuery('a[href*="#"]:not([href="#"])').click(function() {
    if (location.pathname.replace(/^\//,'') == this.pathname.replace(/^\//,'') && location.hostname == this.hostname) {
      var target = jQuery(this.hash);
      target = target.length ? target : jQuery('[name=' + this.hash.slice(1) +']');
      if (target.length) {
        jQuery('html, body').animate({
          scrollTop: target.offset().top
        }, 1000);
        return false;
      }
    }
  });
});
</script>

[Daniel]

Thanks I did what you suggested but when I click the link to the anchor it just jumps right to that section of the page?

[Roberto]

You’re right, it is not working as expected.
There are some updates to the script, you can find them here:

http://www.learningjquery.com/2007/10/improved-animated-scrolling-script-for-same-page-links

[Tom]

Try removing the spaces from your IDs and replacing them with dashes.

[Roberto Enrique]

I found where the error was. The script actually works.
But the “J”‘s in jQuery where Uppercase
they must be Lowercase, so the working script corrected is here:

<script>
jQuery(function() {
  jQuery('a[href*="#"]:not([href="#"])').click(function() {
    if (location.pathname.replace(/^\//,'') == this.pathname.replace(/^\//,'') && location.hostname == this.hostname) {
      var target = jQuery(this.hash);
      target = target.length ? target : jQuery('[name=' + this.hash.slice(1) +']');
      if (target.length) {
        jQuery('html, body').animate({
          scrollTop: target.offset().top
        }, 1000);
        return false;
      }
    }
  });
});
</script>

you can see a working demo here: http://onepager.artomultiplo.net/

[Daniel]

Thanks removing the space worked and the code also worked.

[Tom]

Awesome 🙂

[Author]

Posts