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.html again, 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"> remove height: 100%.
- In
<div id="column2"> set position: fixed.
NOTE: This happens in a computer view (big screen).
How to reproduce (at least in Chrome):
Class: http.ClientRequest.https://nodejs.org/api/http.html#http_class_http_clientrequesthttps://nodejs.org/api/http.htmlagain, but the page was not scrolled up.This is because
<html>and<body>have bothheight: 100%(this is OK), but then there is a main container<div id="content">which also hasheight: 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 replacingposition: absolutewithposition: fixedin the<div id="column2">.To summarize:
<div id="content">removeheight: 100%.<div id="column2">setposition: fixed.