How to create simple BACK button

I Need Help
1

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

2

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
3

Thanks a lot @PeteSharp !

4

Sure… half a month later :rofl:

4 Likes
5

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

6

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
7

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 ?

10

Also you need history for it to work :smiley:

1 Like
11

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
13

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
15

Try amending the code that’s not working with

window.history.go(-1);

17

@Jerry, that’s interesting. :thinking:

19

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

21

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

1 Like
22

javascript:history.go(-1) in a link tag works

Ii can be bad to put JS in HTML indeed but here it’s a minimal script, you don’t expect any value like in a form which is subject to csrf attacks for instance

1 Like
23

Tried your suggestion of applying btn class to a text element and it works.
Of course, without an href it requires some more styling like hover and cursor but curiously I don’t see a «Hand» option in the cursor dropdown menu (Class Manager > Misc)