Removing #anchor links from changing browser URL when clicked

Design help Custom code
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 Likes
2

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

3

Have you tried something along those lines?

https://stackoverflow.com/questions/5928435/append-remove-anchor-name-from-current-url-without-refresh

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.

1 Like
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:
https://webflow.com/website/NJZDesign

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.

1 Like
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)

and

'.w-nav-link' to 'a'

15

Hey! I know it has been a while but it still does not work for me…
I have anchors all over my page and none of them is inside a navbar.
If I now paste your following one-liner into my custom-code head:

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

and replace the $(‘.w-nav-menu’) with $(document) it stills doesn’t work…
Any idea what I’m doing wrong?

16

Hey @samliew!

Your code for the Nav-Menu/Link worked a treat!

I’m having the same troubles as @nico re: anchors sitting outside of the Navbar still showing up as ‘…/#Section’ in the URL.

Also, the Brand Image in my Navbar is essentially a ‘Back to Top’ button - any Ideas how to remove the #hash for that, too?

Read Only Link:
https://preview.webflow.com/preview/make-machine-2-0?utm_source=make-machine-2-0&preview=4240551ca68bf6808c633c378f6835c7

Published Link:
https://make-machine-2-0.webflow.io/

Thanks in advance :pray:t3:

17

Since no one figured this out (lol), I did some more digging and found a fix. Here it is:

<script src="https://d3e54v103j8qbb.cloudfront.net/js/jquery-3.4.1.min.220afd743d.js" type="text/javascript"></script>
<script>
var Webflow = Webflow || [];
Webflow.push(function() {
  $('a').click(function() {
    setTimeout(function() {
      history.replaceState(null, null, ' ');
    }, 0);
  });
});
</script>
4 Likes
18

I Jordan! I just launched my website, and this hack really helped. Thank you! I tried a couple of others but none of them did the trick.

Just one quick question. I am not technically proficient, but I see the script source points to the following. Any info on it what this link is exactly? https://d3e54v103j8qbb.cloudfront.net/js/jquery-3.4.1.min.220afd743d.js

19

I tried Jordan’s fix, and it did remove the #anchor link from the browser URL when an anchor link is clicked. However, it looks like the change in URL still posted to the page history somehow, as the browser back button still doesn’t work as expected: clicking the browser back button doesn’t change the page appearance at all, indicating that the history is still “stuck” on the anchor tag. Example: the in-page links at Volunteer Design Leadership

20

@Sav_C - That is an unnecessary load of jQuery (older version) which Webflow already loads 3.51 on all pages.