[Resolved] Back to previous page – in Navigation, possible

[Jenny]

Hello,

I just used google, but I didn’t found a solution for my specific question. Can you help me again, please? 🙂
I need a back to previous page Button for my page in the Navigation. I know the Template can do this (in the Blog Section). But how can I activate this in the Navigation?

The link is in the private area 🙂

Thanks for your help,
Jenny

[Elvin]

Hi there,

I’m not exactly sure what you mean.

For this “back to previous page”, is it a link sending the user to the exact page visited prior to visiting the page much like the browser’s navigation buttons? https://share.getcloudapp.com/rRuj1JmK

Or is it a button that points to a specific page? Let us know.

[Jenny]

exactly what you sayed:
For this “back to previous page”, is it a link sending the user to the exact page visited prior to visiting the page much like the browser’s navigation buttons? 🙂

But for my menu
https://ibb.co/LR4V4yr

[Elvin]

You can add back-button class to the Zurück link on Appearance > Menus.

Sample video on how to do it – https://share.getcloudapp.com/4gunKDWE

You then add this script:

<script>
	let backBtn = document.querySelector(".back-button");
	backBtn.addEventListener('click',function(){
		window.history.back();
	});
</script>

Here’s how to add it – https://share.getcloudapp.com/Wnuxy48Q

Doing this would make the link a “back-button” link.

[Jenny]

Thank you Elvin, your Videos are great 💕.

But it seems I make anything wrong. My Button doesn’t work 🧐.
Could you help me again, please?

https://www.designhoch10.com/impressum/

[David]

Hi there,

try changing Elvins script to this:

<script>
let backBtn = document.querySelector(".back-button");
backBtn.addEventListener('click',function(e) {
    e.preventDefault();
    window.history.back();
});
</script>

[Jenny]

Dear David,

thanks for your answer 💕, I tested it, but – it does´t work.
I´ts not a big problem if there isn’t it a solution, I can find an other solution, if not.

Have a nice evening,
Jenny

[Jenny]

Hello,

i will try it once more 🙂 has anyone of you an last idea? If not, I will ask my developer.
Thank you ❤️
Jenn

[David]

Sorry we missed your previous topic
Does it work if you add the button to the Page – not in the navigation ?

[Jenny]

No Problem 🙂
I tried it out
https://www.designhoch10.com/wordpress-webseite-und-laufende-kosten/

(zurück – in the Header)
but it doesn’t work. In the URL just stand
https://www.designhoch10.com/wordpress-webseite-und-laufende-kosten/#

Maybe the Problem is the #?

[David]

You can remove the # from the button link – GP will just output an empty span in its place.

[Jenny]

It’s out – but 😆🙈 no reaction of the button. Should I give it to my developer? I don’t want to steal your time 😆

[Elvin]

I think the eventlistener isn’t applying on the button.

Let’s modify it again. Try this:

<script>
	let backBtn = document.querySelectorAll(".back-button");
	for(i=0; i<backBtn.length; i++){
		backBtn[i].addEventListener('click',function(e) {
			e.preventDefault();
			window.history.back();
		});	
	}
</script>

If this doesn’t work on your end, can you put the site back up? It’s displaying blank screen on my end.

[Jenny]

thank you Elvin, but – no reaction of the button :/
https://www.designhoch10.com/wordpress-webseite-und-laufende-kosten/

The page is online again

[Elvin]

Ah that’s my bad. I pasted the wrong writeup. doh.

I added the version w/o the iteration value.

Let’s add the iteration value [i] before the addEventListener.

Try this:

<script>
	let backBtn = document.querySelectorAll(".back-button");
	for(i=0; i<backBtn.length; i++){
		backBtn[i].addEventListener('click',function(e) {
			e.preventDefault();
			window.history.back();
		});	
	}
</script>

See it in action on this sandbox site – https://dev-generate-press.pantheonsite.io/

[Author]

Posts