Cross Page Anchor ID Links and Browser Back Button

[jsandlin85 (Jeremy Sandlin)]

Hi, I am having an interesting issue that I understand is expected behavior for cross-page anchor ID links. Webflow support has filled me in and explained that when you click on a link that takes you to an anchor ID on another page, what is really happening in the browser is that it goes to the correct page then their javascript looks up the hashtag ID and auto-scrolls down to that section. Pressing the back button the first time, goes back one step (to the top of the page). The second goes back to the previous page.

What I would like to do is override this behavior with some custom code. The end result of which would be when you reach an anchor ID from another page, you can click the back button in your browser once to return to the page that you came from instead of needing to click twice.

To recreate what I am describing:

1. On the following page, scroll to the “Ways to Give in the Future” section: http://five-valleys-land-trust-dev.webflow.io/donations
2. Click on one of the blue “Learn More” buttons. These buttons link to #anchor ID links on another page of the site using a relative path. e.g. /planned-giving#Tax-Credit
3. The link works as expected but, if you click the back button in your browser, it takes you to the top of the current page instead of taking you back to the Donation page. You need to click the back button twice to return to the page you came from.

I’m wondering if there is some kind of solution involving javascript and access to the browser’s history but I’m not sure how to go about that or how to account for back button presses that occur when a visitor has not arrived on the page via an anchor ID link.

Thanks for any insight you can provide!

Here is my public share link: https://preview.webflow.com/preview/five-valleys-land-trust-dev?preview=ccfe059f1c348094ac45b97894fdf1a8

[jsandlin85 (Jeremy Sandlin)]

So, I decided that for my page, it made sense for this not to be a general back button but a button that does take you back to the donations page regardless of how you landed on the planned giving page.

I did figure out a workaround for anyone who is having this issue and does need to circumvent the way that Webflow currently handles anchor links. You can place the following JavaScript on the page with your back buttons and target your buttons or links with an appropriate selector. I am using “.back-button” as the selector in this example.

<script type="text/javascript">
    $(".back-button").click(function(e) {

        e.preventDefault();  // This will prevent the default link behavior

        if(window.location.hash) {  // This checks to see if there is a "#" in the current url
          window.history.go(-2);  // If so, this will navigate the browser back by 2 pages  
        } else {
          window.history.go(-1);  // If not, this will only navigate back by 1 page
        }
    });
</script>

[cyberdave (Dave S.)]

Hi @jsandlin85, thanks for sharing this!