How to remember scroll postion on mobile pages when click back?

How To
1

when you scroll down in the middle of the blog you click the hyper link and then when you come back you are back on the top of the page. how can I make the mobile scroll postion saved. so the client does not have to scroll back to the subject.

2

Hi Habeeb,
I moved your bug report to the “How to” category.

I asked chatGPT how to achieve this, assuming it would lead to a JS solution:

When navigating between pages in a web application or website using the browser’s history buttons (like back and forward), maintaining the scroll position is important for user experience. Here are a few strategies to achieve this effect in your web application:

  1. Use the ⁠scrollRestoration Property
    Modern browsers support the ⁠scrollRestoration property of the ⁠history interface, which can automatically manage scroll position:
if ('scrollRestoration' in history) {
  history.scrollRestoration = 'manual'; // Prevent automatic scroll restoration
}

You can then manually restore the scroll position using ⁠window.scrollTo() in the ⁠popstate event handler:

window.addEventListener('popstate', function(event) {
  // Restore the scroll position if needed
  window.scrollTo(0, sessionStorage.getItem('scrollPosition') || 0);
});

Before navigating away from a page, store the current scroll position:

window.addEventListener('beforeunload', function() {
  sessionStorage.setItem('scrollPosition', window.scrollY);
});
  1. Use State Management
    If your application is based on a front-end framework (like React, Vue, etc.), use their state management solutions to keep track of the scroll position when navigating.
    Example in React:
import { useEffect } from 'react';

function useScrollRestoration() {
  useEffect(() => {
    const saveScrollPosition = (e) => {
      sessionStorage.setItem('scrollPosition', window.scrollY);
    };

    window.addEventListener('beforeunload', saveScrollPosition);

    // Restore the scroll position
    const scrollY = sessionStorage.getItem('scrollPosition');
    if (scrollY) {
      window.scrollTo(0, parseInt(scrollY, 10));
    }

    return () => {
      window.removeEventListener('beforeunload', saveScrollPosition);
    };
  }, []);
}
  1. Manage Manual Scroll Using a State Variable
    For simple applications, you can also use a manual approach by storing the scroll positions in an object keyed by the URL and restoring it during navigation.
  2. Use Libraries
    There are libraries available like ⁠react-scroll-restoration for React or others for different frameworks that can simplify handling scroll positions across navigations.
  3. Smooth Scroll Restoration
    For a smoother user experience, you can animate the scroll restoration with a small timeout or a scrolling animation function instead of jumping to the position directly.
    Example
    Here’s a complete implementation of the first approach using basic JavaScript:
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Scroll Restoration Example</title>
</head>
<body>

<div style="height: 2000px;">
    <h1>Scroll Down and Navigate</h1>
</div>

<script>
    // Prevent automatic scroll restoration
    if ('scrollRestoration' in history) {
        history.scrollRestoration = 'manual';
    }

    window.addEventListener('beforeunload', function() {
        // Store the current scroll position
        sessionStorage.setItem('scrollPosition', window.scrollY);
    });

    window.addEventListener('popstate', function() {
        // Restore the scroll position
        const scrollY = sessionStorage.getItem('scrollPosition');
        if (scrollY) {
            window.scrollTo(0, parseInt(scrollY, 10));
        }
    });

    // On page load, you might want to restore the scroll position
    const storedScrollPosition = sessionStorage.getItem('scrollPosition');
    if (storedScrollPosition) {
        window.scrollTo(0, parseInt(storedScrollPosition, 10));
    }
</script>

</body>
</html>

This approach will help you maintain and restore scroll position corresponding to user navigation through the browser’s history buttons.
––

Implementing custom code, unfortunately, exceeds the support scope. However, that should give you a first hint.

Best,
timmse

3

I appreciate your efforts in finding the solution I did tried with Chat Gpt past few weeks. Honestly had no luck and it’s too complex .

But still thanks for helping :+1:t5::pray:t4: