Restore the scroll position when browser back button is clicked

🙋Get Help
1

✓ Description of your issue
I’m designing a theme with frontity, I wanted a fixed header along with the fixed sidebar. I have successfully implemented it using CSS Grid but after implementing this window.scrollTo(0,0) stopped doing anything because everything was already in a fixed position because of the grid. I fixed it too by replacing window.scrollTo(0,0) with document.querySelector('[class*="ContentContainer"]').scrollTo(0,0) but now on hitting back button doesn’t remember the correct scroll position like it does everywhere for example, I want scrolling behaviour like Blog - Frontity.org. The behaviour I’m talking about is

  1. Open any page and scroll.
  2. Clicking on the internal link and scroll.
  3. Hit the browser back button, and your scroll position changes back to the original position.
    I know it sounds confusing, please check this note with both videos and notice the arrow https://notes.divify.in/s/share/4957393/3qgk7phnzs9safmwlxic

✓ System info → npx frontity info

## System:
 - OS: Windows 10 10.0.19042
 - CPU: (8) x64 Intel(R) Core(TM) i5-1035G1 CPU @ 1.00GHz
 - Memory: 2.04 GB / 7.81 GB
## Binaries:
 - Node: 14.15.1 - C:\Program Files\nodejs\node.EXE
 - npm: 6.14.8 - C:\Program Files\nodejs\npm.CMD
## Browsers:
 - Chrome: Not Found
 - Edge: Spartan (44.19041.423.0), Chromium (87.0.664.47)
 - Internet Explorer: 11.0.19041.1
## npmPackages:
 - @frontity/core: ^1.9.1 => 1.9.0 
 - @frontity/google-analytics: ^1.3.1 => 1.3.1 
 - @frontity/head-tags: ^1.0.8 => 1.0.7 (1.0.8)
 - @frontity/html2react: ^1.5.0 => 1.4.0 (1.5.0)
 - @frontity/tiny-router: ^1.2.3 => 1.2.2 
 - @frontity/wp-comments: ^0.2.4 => 0.2.4 
 - @frontity/wp-source: ^1.10.0 => 1.9.1 (1.10.0)
 - @frontity/yoast: ^2.0.1 => 2.0.1 
 - forgotten-developer: file:packages/forgotten-developer => 1.0.0 
 - frontity: ^1.13.0 => 1.12.0 (1.13.0)
 - prismjs: ^1.22.0 => 1.22.0 
 - react-icons: ^3.11.0 => 3.11.0 
 - yarn: ^1.22.10 => 1.22.10 
## npmGlobalPackages:
 - frontity: Not Found
 - npx: Not Found

✓ Specific errors you’re getting in the terminal
None

✓ Specific errors getting in the console when open category link from the navigation menu
None

✓ A repository or code sandbox with the code of your project
https://github.com/Divaksh/forgotten-developer/tree/master

✓ A deployed version of your site
http://divaksh.com/

✓ The URL of your WP REST API
https://api.divaksh.com/wp-json

3

Hi @Divaksh,

The “To the top” button that can be seen in https://frontity.org/blog/ is actually a feature available in the twentytwenty-theme

Here you have the code of this part in case you want to emulate it in your project

Hope this helps

5

This is not what I was talking about, please check the following note you will get to know what I’m talking about.

6

I have merged the theme with mars theme. Now both themes are identical but with CSS changes.

The scroll bar functionality is still not working as expected.

  1. Scrollbar doesn’t remember it’s location when goings back to previous page
  2. Scrollbar doesn’t move to top when click on any link.

Please guide me to the right direction. Thank you.

7

I couldn’t find any way to restore the scroll position on back key press, like it is happening in the all other frontity blogs. :frowning: But I found a way to send scroll to the top. I can do this by using onpopstate but is it good idea to use the following code? If yes then what is the best place to use the code in the theme?

  window.onpopstate = function(event) {

    document.getElementById('content-container').scrollTo(0,0);

  }
8

Hi, I think that your issue is that you are not scrolling <body>, which is what the other themes do, and why the browser takes care of restoring the scroll position. If you want the same behaviour, I’d recommend you to change your html layout in a way that the scroll of lists and posts is done on <body>, and not in any other div.

2 Likes