Actually, the question is very clear, as seen in the title. The part I want to add is this, just like on Twitter, when I go down the page and then enter a user profile or post detail and return to the previous page by pressing the back button on the browser, the page opens where I left off, despite being lazy. How can I achieve this with Django. I don't know if it matters, but Vue is used as cdn in my project.
I would like to talk about an example on the subject. In Safari and Chrome browsers on a computer with macOS, when the back button is pressed on the browser, exactly the event I want takes place. It comes back as if the previous page was cached, but on computers with Windows or Linux, when the back button on the browser is pressed, it goes to the previous page by requesting it again.
If you are using views to render your whole page I can't see any straightforward way that'll make the browser scroll on back button.
In case of templates HTML/CSS/JavaScript you have two choices either to rely on the browser completely to manage scrolling for you (it'll work when the browser caches the page).
Or you can add a simple script that stores previous and current routes in local storage and check scrolling on page load :
const json = localStorage.getItem("routes");
const currentPath = window.location.pathname;
let newPrevious = null;
if(json) {
const routes = JSON.parse(json);
const isPrevious = routes.previous != null
&& routes.previous.path === currentPath;
if(isPrevious){
const { x, y } = routes.previous;
window.scrollTo(x,y);
}
//Our new previous route is the old current
newPrevious = routes.current;
}
//Now we update the current route.
const newRoutes = {
current: { x: 0, y: 0, path: currentPath },
previous: newPrevious
}
localStorage.setItem("routes", JSON.stringify(newRoutes));
Include The previous script on load of each page. Now we add a listener on before unload where we add the last scroll position.
const x = window.pageXOffset
?? document.documentElement.scrollLeft
?? document.body.scrollLeft
?? 0;
const y = window.pageYOffset
?? document.documentElement.scrollTop
?? document.body.scrollTop
?? 0;
let routes = JSON.parse(localStorage.getItem("routes"));
routes = { ...routes, current: { ...routes.current, x, y } };
localStorage.setItem("routes", JSON.stringify(routes));
Just Keep in mind that this will force scroll even when you have a link on your page that redirects to the previous one.
Addition: In case you're thinking of using a frontend library like Vue with Vue router you can forget about managing this manually and just use <router-link> for your redirecting in your website and scrolling will be managed automatically.
You can check this feature here in the docs.
I think that's the case for twitter you can see here they're using React native for web.