Adding a Back Button to Return to Scrolled Position

AI-generated summary

The discussion revolves around adding a “back” button to a mobile app that embeds a Discourse community, allowing users to return to the exact scroll position on the home screen after navigating to a topic details screen. cristo initially asks for help with this issue, and merefield suggests using the swipe gesture, which doesn’t work for cristo’s app.

It’s later revealed that the app is embedded in a mobile app, which might be the reason for the lack of a back button and swipe functionality. NateDhaliwal suggests a component that can help, but it has some limitations. cristo uses the component but faces an issue with the back button disappearing when scrolling down.

The conversation continues with Lilly and NateDhaliwal discussing the back button, and merefield offering to help find the root cause of the issue. cristo mentions that the app’s back button closes the app instead of navigating back. denvergeeks suggests trying an existing navigation component, but it doesn’t work for cristo’s app.

Hi everyone,

I need help with navigation on my app. Here’s the flow I’m working on:

  1. The user scrolls down the home screen (image attached: “home”), reading the titles of the latest topics.
  2. When they click on a specific topic (image attached: “Bear hugs gone too far”), they are taken to the topic details screen (image attached: “topic screen”), where they can read the full text and replies.
  3. The issue: there’s no “back” button that allows the user to return to the same point in the scroll on the home screen to continue browsing topics.

How can I add a button to return the user to the exact scroll position they were in on the home screen?

Thanks in advance for any suggestions!



Swipe right from left side.

Tried that but it doesn’t work. Thanks anyway, @merefield !

Works here on Meta too

Call me confused but doesn’t your browser have a back button? I just tested on my iPhone in Safari and Chrome and the back buttons take me right back to where I was in the topic list page. The swiping left and right to go back and forward respectively (like what Robert mentioned above) also works. :thinking: hub app also has back and forward buttons and swiping.

sorry for not giving the full context: my discourse community is embedded in our mobile app…maybe that’s why there’s no back button and the swiping doesn’t work?

So that’s your problem :slight_smile:

Rather unnecessary too (at least on Android) as it has excellent support for PWAs natively (one of the reasons I switched from Apple and their dragging feet)

Discourse is a PWA out of the box :rocket:

Just install the website.

Hi @cristo !
If you really want to have it embedded, maybe this component will help?

Though I’m not sure if it goes back to the scrolled position.

@NateDhaliwal many thanks!!

It helped yes! There’s just one detail that maybe you know how to fix.

The back button disappears when you scroll down (please see attached video)…is it possible to have the back button fixed/floating at the top of the screen so that it remains visible even when scrolling?

Hi there. As I don’t control this component, you will have to make this request in the component’s topic itself. Thanks!

Sorry I don’t know android apps well, but is this not a back button?

I think they were referring to the component’s back button.

This button is going to be clunky and unnecessary.

Ultimately there is something wrong with the app that’s preventing swipe back which is native to Discourse and should be supported by the app.

I have deployed several apps to the app store and play store (none of which had this issue)

If you have budget I can take a look at the root cause for you.

Yes, it is. But when users click on that button the app closes (goes to background) instead of navigating back.

@cristo could you please give this existing TC a try and let me know your thoughts…

https://github.com/davidkingham/mobile-navigation/

I just tried on iphone 15 pro max - the back and forward buttons don’t show up in safari, and they show up in chrome but don’t work :cry:

I tried it on our mobile app (embedded webview) and it didn’t work.

The back and forward buttons do appear but nothing happens when I click on them.

Thanks for checking that and please do post any additional design ideas or examples you find.