Hello! I am trying to make a button that sends the user to the previous page. I have implemented this before in custom coded websites, but do not know how to do it in Webflow. Thank you very much
hi @Park_Dalton Webflow doesn’t offer this basic functionality, just use your custom code and use it in site, page or embed element.
you may find some answers in this forum via search input field
https://discourse.webflow.com/search?q=prev%20next%20post
or use Finsweet solution
Hi Park,
Paste `javascript:history.back(-1); in the URL section of the Link block
Publish the site and test
If I can I will just add clarification, this code is related to history of browser session and not to prev / next . What this mean that if you will land on specific page of your website by clicking link let say from google search, than clicking back button in your article will redirect you back to google search and not to previous article on your website.
Todays code use window
instead javascript
True,
The Finsweet solution you mentioned works perfectly for switching between articles. Still mentioned the JS script if that’s what he was looking for
Wow, so what’s the difference between using window
and javascript
to go back?
Learning a lot from your Stan
javascript
was used for older browsers compatibility like IE6 and for other was used window
. While IE is gone there is no reason to use it as window
is supported with all browsers. At least this is how I remember it.
Is there a way to keep a filter that was active on the previous page, active when navigating back from a deeper/template page
Hello, did you find a solution?
This was incredibly helpful! Thank you!
I found a way to detect the last page via breadcrumbs, and if none exist then it will go back to the previous browser page via history. It also displays the name of the previous page! Here is the JS:
<script>
const breadcrumbLinks = document.querySelectorAll('.breadcrumbs_item a');
// If there are breadcrumb links, update the span text with the previous page name
if (breadcrumbLinks.length > 0) {
const previousPageName = breadcrumbLinks[breadcrumbLinks.length - 1].textContent;
document.getElementById('backText').textContent = `${previousPageName}`;
document.getElementById('backLink').href = breadcrumbLinks[breadcrumbLinks.length - 1].href;
}
// Optional: add event listener if needed for extra functionality
document.getElementById('backLink').addEventListener('click', function(event) {
// You could prevent the default behavior here if necessary:
// event.preventDefault();
// Example logic to ensure the navigation happens:
if (breadcrumbLinks.length > 0) {
window.location.href = breadcrumbLinks[breadcrumbLinks.length - 1].href;
} else {
window.history.back(); // Fallback if no breadcrumb links exist
}
});
</script>
Here is how my DOM is set up:
I set the back button to only show on mobile, but that is optional.
One thing to note is that I also have breadcrumb schema set up, so I’m not sure if the script will work without the schema. Below is a screenshot of how mine is configured. The section and container is optional.