Streaming live at 10am (PST)

Smooth Scroll Without Anchor Link Displaying In Address Bar


#1

@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 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>

Looking for a scroll - to - anchor point solution
#2

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

PS: Cool portfolio mate smile


#3

Haha thanks @jaidenleach smile it's always evolving and has mostly old work of mine haha. 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


#4

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


#5