Smooth Scroll Without Anchor Link Displaying In Address Bar

@elcalibano had seen this cool anchor link method/workaround to make sure Anchor links or the (#dividnamegoeshere) doesn’t show up in your address bar. :smile: So I went digging and found it haha. Though it only works on desktop so far as I know after implementing it on my site: www.youfoundwaldo.com

Thoughts @bartekkustra on implementing this for touch screen devices as well? It’s working on my iPhone but isn’t working on iPad.

You can keep doing everything as usual for your anchor links, but then add the following to your footer.
Simply use smooth-scroll jquery :slight_smile:
#CopyAndPaste:

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

Rockin trick. Thanks for sharing. Would indeed be awesome if it works flawlessly on mobile.

PS: Cool portfolio mate :slight_smile:

2 Likes

Haha thanks @jaidenleach :slight_smile: it’s always evolving and has mostly old work of mine haha. :slight_smile: Once the CMS integration is up it’ll make it so easy to keep my project workflow updated :smiley:
Let me know if you need any assistance :smiley:

1 Like

UPDATE: the linking works just fine without displaying in the address bar. Simply testing on old iOS. :smiley:

2 Likes