How to create simple BACK button

Please advise (not to consider browser’s back button)

Probably a few ways to do this, but one way…

1. Add a button & set the interaction to "none"

2. Add a custom attribute to the button

onclick="backButton()"

Screen Shot 2020-07-02 at 8.13.57 AM

3. Add a small script to the footer

<script>
function backButton() {
window.history.back();
}
</script>
5 Likes

Thanks a lot @PeteSharp !

Sure… half a month later :rofl:

4 Likes

:slight_smile:
Sometimes, suddenly appears a things, which are consuming all short–term memory and activity. I have just opened my Bloc project again and remembered what I have asked for.

No worries. A great thing about support forums is that this thread will still be available to help others in the future as well. :slightly_smiling_face:

2 Likes

I’m the vivid exemple of someone taking advantage of this thread :wink:
I tried it but it is not working.

Inspecteur give: <a href="#" class="btn btn-sq btn-black btn-button-style float-lg-right float-md-right float-sm-right float-none" onclick="backButton()"><span class="icon-spacer ion ion-chevron-left"></span>RETOUR</a>

and before closing Body tag <script>function backButton() {window.history.back();}</script>

What am I doing wrong ?

Hi @svimic, just follow the steps as @PeteSharp mentioned earlier and it should work. As an alternative, you could replace “backButton” with “goBack” (without brackets).
Note: It will not work in preview.

1 Like

Also you need history for it to work :smiley:

1 Like

I tried, retried, check that custom attribute is OK, checked that script is OK in the footer, inspect in browser (Chrome and Safari) and see that the onclick is there and that the script is there but it does not work! Must be a silly thing I missed or what ?

Then I re-copy your script and paste it as raw text. Guess what ? It is working now :blush:
In Firefox and Chrome, but not (yet ?) in Safari Mac and IOS. Maybe a cache problem. I empty them through the developer menu but no change.

If someone wants to check, it’s here.
I’m going to make about 30 pages like that so better to have it perfect now :joy:

Thanks guys.

1 Like

Hi @svimic, I’m having the same with Safari. Something blocks the return button. As you can see it’s trying though. Any idea @PeteSharp why Safari is blocking?

Thanks for having a look. Weird no ?

I tried to modify the page source, getting rid of the script and just entering the old way in href "javascript:history.back()" and it works in Safari and others.

So I did it directly in Blocs > Interaction > Navigate to URL and removed the script and custom attributes.

So my question is: Is there any problem calling history:back in the href rather than onclick with a script ?

1 Like

Considering wrapping javascript directly into html is a bad practice, it seems to be the only (working) solution. Thanks for sharing your results @svimic .

Try amending the code that’s not working with

window.history.go(-1);

Hi @PeteSharp,
None of the following is working:
window.history.go(-1);
window.history.goBack()
window.history.Back()

I tried as well the following values:
goBack
useHistory
getItem
Back

All work in Chrome but none of them work in Safari.

@Jerry, that’s interesting. :thinking:

Same here on W3Schools. If you try the “go back” button sample it works. Even in Safari. :thinking:

That’s where I originally got it from, and it was working for me.

Ok, we’re getting somewhere:
When exporting, Blocs is adding a href which seems to cause the trouble in Safari:


When I remove href=“#” it works like a charm in safari: http://toukorek.com/blocs/goback/index.html
Why is blocs doing this? Or what am I doing wrong? @Norm

You can avoid that by just apply the .btn classes to an element like text.

1 Like