[documentation site] Back button does not scroll the page (solution included) #6751
Description
NOTE: This happens in a computer view (big screen).
How to reproduce (at least in Chrome):
- Open (for example) https://nodejs.org/api/http.html
- Within the "Table of Content", click in
Class: http.ClientRequest. - It will scroll down to the corresponding class definition, and the window location becomes
https://nodejs.org/api/http.html#http_class_http_clientrequest - Now press the browser Back button.
- Window location becomes
https://nodejs.org/api/http.htmlagain, but the page was not scrolled up.
This is because <html> and <body> have both height: 100% (this is OK), but then there is a main container <div id="content"> which also has height: 100%, and there is where the problem is:
By having a container with height: 100% within the body, the scroll is not done on the body itself, but on the container. And unfortunately the Back button does not scroll back a div (but just the body element).
The solution is to remove the height: 100% of the <div id="content"> (you can test it by removing such a CSS property in the browser inspector), but of course that requires changes for the left menu to remain fixed when the page is scrolled. Such a change just requires replacing position: absolute with position: fixed in the <div id="column2">.
To summarize:
- In
<div id="content">removeheight: 100%. - In
<div id="column2">setposition: fixed.