Streaming live at 10am (PST)

Removing #anchor links from changing browser URL when clicked


#1

Hey friends, needing some quick help here. I’m attempting to place smooth scroll links to various sections inside my site – this can be done either through Page Section links that have an ID, or placing the #IDNAME as the URL for Link Blocks.

Webflow has built in smooth scrolling – this is great. However with all the page jumps I have inside my site, I need to remove the #hash from showing up in the browser URL bar. This is to prevent poor user experience, i.e. a user clicks around the page 5 times… this in turn requires 6 clicks to the browser back button to actually go back a page.

Any help with a quick script I can add to my site to leave the smooth scrolling as is, but prevent all hash links from landing in the URL bar of the browser? Happy to Venmo/CashApp anyone $5 that can solve this for me lol. I am out of answers!


#2

Any ideas here? Still implementing a few other scripts and still no luck. :frowning:


#3

Have you tried something along those lines?

The second answer uses jquery which is already supported by your webflow site.

I’m linking to things I haven’t tested and I’m not a coder myslef, FYI.


#4

@jordanwinn you could use this script to scroll to the section without having the anchor on the URL:

$('your-class').click(function() {
$('html, body').animate({
    scrollTop: $( $.attr(this, 'href') ).offset().top-92
}, 1000);
 return false;
});

1.) You will need to replace “your-class” with whatever class the links are. For these links hrefs too, put in a hashtag followed by the ID of the section it should scroll to.
3.) If you have a fixed navbar, you can also replace the “92” with the height in pixels of your nav.
4.) Then you should wrap this in script tags and place before the closing body tag.

If you need help implementing this let me know and I can assist further.


#5

Can’t believe this is one of only like two posts on this topic :upside_down_face:

Any chance I could get a hand implementing this?

Whatever help you can offer would be awesome! :pray:


#6

Hey @NathanZ sure, what sort of help are you looking for? Were you able to follow my instructions from the previous post?


#7

Hey @justin_c!

I unfortunately was unable to utilize your instructions to get this to work. I’m honestly not sure what I’m doing wrong, so if you have a site I can use as a reference point, or really any visual assistance, I think that would be the most helpful.

Thanks for getting back to me :slight_smile:


#8

@NathanZ if you could share a site’s read only link (and published link) you are trying this on, I’d be happy to take a look. Thanks!


#9

Hey Justin!

Sorry for taking so long to get back to you - been a crazy past few weeks.

Here is the showcase of my site in Webflow:

Thanks again!


#10

@NathanZ

Change your custom code to this

<script>
$('.w-nav-menu').on('click', '.w-nav-link', function(evt) {
    if(evt.target.hash !== '') {
        $('html, body').animate({ scrollTop: $( evt.target.hash ).offset().top - 130 }, 1000);
        return false;
    }
}); 
</script>

#11

@samliew
That worked brilliantly!!!
Thank you so much :smiley:


#12

You can also use this one-liner:

<script>$('.w-nav-menu').on('click','.w-nav-link',evt=>!(evt.target.hash!==''&&$('html,body').animate({scrollTop:$(evt.target.hash).offset().top-$('.w-nav').outerHeight()},800)));</script>

Works for ANY project that uses the Webflow navbar and included nav link components.


#13

What if I want to remove #anchors from links that exist outside of the navbar?


#14

Then just change $('.w-nav-menu') to $(document)