Link to #id - clear #id from url on Refresh

Design help Animations & Interactions
1

Trying to figure out if this is possible in Webflow. In this playground site I have the blue “Download App” button linked to an #id so it will scroll down the page. I’ve published the site and the scroll works but when I refresh the page the scroll happens automatically.

I’d like to find a way to remove the #id from the url on refresh. I did a bit of searching and found the bits of code below but haven’t gotten them to work…yet.

Any suggestions?

http://msplay.webflow.com

https://preview.webflow.com/preview/msplay?preview=251108e404e65b1aaa9b6bc5d2f6590b

As others have mentioned, replaceState in HTML5 can be used to remove the URL fragment.

Here is an example:

// remove fragment as much as it can go without adding an entry in browser history:
window.location.replace(“#”);

// slice off the remaining ‘#’ in HTML5:
if (typeof window.history.replaceState == ‘function’) {
history.replaceState({}, ‘’, window.location.href.slice(0, -1));
}

or

function removeHash () {
history.pushState(“”, document.title, window.location.pathname
+ window.location.search);
}

or

$(‘#logo a’).click(function(e){
window.location.hash = ‘’; // for older browsers, leaves a # behind
history.pushState(‘’, document.title, window.location.pathname); // nice and clean
e.preventDefault(); // no page reload
});

2

That is absolutely how it is supposed to work. When you click on your button, an #anchor is added to the url. If you refresh this url, it will always point to your section.

The question is why at this point do you want to refresh your page? What’s the use-case of this?

3

@vincent Yeah, I realize that is how they are supposed to work but I’d like the refresh to refresh without the #id. I think it would be cleaner and less confusing from a user perspective. Refreshing is how any interactions would replay (unless I add an additional step so they play on upward scroll as well…something I don’t want to do at this point). I can alter my design which I might do anyway but am hoping I could sort out how to accomplish this.

Sort of like turning scroll interactions on in iOS…I’d at least like the option :smile:

4

Have you noticed the “loop” checkbox for interactions steps? If you can add a bit for your interactions to reproduce, because you obviously want the users to play with them (I agreee to that), aiming at refresh for getting the anims again isn’t IMHO a good use case. Why not putting a replay button then?

Scroll interactions on mobile aren’t only bad with webflow so they’ve been deactivated, they wor so-so everywhere so for the moment I think it’s a good thing. I’d like this to work too though.

5

@vincent So are you saying the “loop” should make a scroll interaction happen on a scroll back up? So how I think it works is if I have an image that slides in on scroll down, then on scroll up it’s static…unless I make the last interaction return it to an original position. Loop doesn’t seem todo anything different.

I see scroll interactions working on a lot of mobile sites and I’d at least like the option…it would be even better to be able to control scroll interactions on an element-by-element basis but that might be really difficult technically.

6

At the end of this page you have a blue banner with 3 onscroll anims one after another. they’re set that if you scroll back, they nicely tween to their original states. As the loop is checked, they’ll play again when you scroll up.

http://www.kds.com/

actually, I may be wrong, I don’t know if loop is involved here… loop is more to loop an anim and have it constantly happening, like a rotation. Anyway, my example link shows what you’re maybe aiming at.

7

I’m trying to do the same thing on my site right now… the home page has a arrow that brings you down to another section, but I’d like the tag to be gone on reload… any suggestions?

www.aidenbowman.webflow.io

8

Clear hash on any link click:

var Webflow = Webflow || [];
Webflow.push(function() {
  $('a').click(function() {
    setTimeout(function() {
      location.hash = '';
    }, 50);
  });
});
2 Likes
9

Thanks! Where would you insert this wonderful piece of code? :grimacing: Thanks!

10

For JavaScript, wrap it around script tags, then paste this in your page settings, body field.

If you want it to apply sitewide, paste this in your site dashboard custom code, body field.

<script>
var Webflow = Webflow || [];
Webflow.push(function() {
  $('a').click(function() {
    setTimeout(function() {
      location.hash = '';
    }, 50);
  });
});
</script>
2 Likes
11

Thanks, I did this at first, and then didn’t like how it left the # in the url at the top.

With a little research I found this:
http://stackoverflow.com/questions/1397329/how-to-remove-the-hash-from-window-location-with-javascript-without-page-refresh#answer-5298684
which will let you completely remove the # using the HTML5 location history:

This works in Chrome 9, Firefox 4, Safari 5, Opera 11.50 and in IE 10.
For unsupported browsers, it gracefully degrades:

function removeHash () { 
    var scrollV, scrollH, loc = window.location;
    if ("pushState" in history)
        history.pushState("", document.title, loc.pathname + loc.search);
    else {
        // Prevent scrolling by storing the page's current scroll offset
        scrollV = document.body.scrollTop;
        scrollH = document.body.scrollLeft;

        loc.hash = "";

        // Restore the scroll offset, should be flicker free
        document.body.scrollTop = scrollV;
        document.body.scrollLeft = scrollH;
    }
}

Then just use that function wherever you need it.

12

Doesn’t seem to work in the jsfiddle frame.