Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

[documentation site] Back button does not scroll the page (solution included) #6751

Closed
ibc opened this issue May 13, 2016 · 7 comments
Closed

[documentation site] Back button does not scroll the page (solution included) #6751

ibc opened this issue May 13, 2016 · 7 comments
Labels
doc Issues and PRs related to the documentations.

Comments

@ibc
Copy link

ibc commented May 13, 2016

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.
@ibc ibc changed the title Back button does not scroll the page [documentation site] Back button does not scroll the page (solution included) May 13, 2016
@ibc
Copy link
Author

ibc commented May 13, 2016

The only disadvantage of the above solution is that, when scrolling the left menu and reaching the end of it, the main page is scrolled. This is how the web works however. But I've a mini library for that:

https://github.com/ibc/dontscrollthebody

:)

@mscdex mscdex added the doc Issues and PRs related to the documentations. label May 13, 2016
@mscdex
Copy link
Contributor

mscdex commented May 13, 2016

/cc @nodejs/documentation

@ibc
Copy link
Author

ibc commented May 13, 2016

Should I report this issue in https://github.com/nodejs/nodejs.org instead?

Note that "About this Documentation" clearly states that:

If you find a error in this documentation, please submit an issue

(which points to this project)

@lpinca
Copy link
Member

lpinca commented May 14, 2016

@ibc does this pr #6641 fixes the issue?

@silverwind
Copy link
Contributor

#6641 should fix this, which I'll land shortly.

@silverwind
Copy link
Contributor

silverwind commented May 15, 2016 •
edited
Loading

https://github.com/ibc/dontscrollthebody

I had a similar hack planned in #6641, but decided to not mess with the scrolling.

silverwind added a commit to silverwind/node that referenced this issue May 15, 2016
@silverwind
doc: fix issues related to page scrolling
f2630d2 
Moved the sidebar to a fixed position and moved the main column to the
page's body, which results in back/forward navigation through hash
links and search highlight working again.

Fixes: nodejs#6637
Fixes: nodejs#6751
Based on: nodejs#5716
Reviewed-By: Luigi Pinca <luigipinca@gmail.com>
Reviewed-By: Robert Lindstaedt <robert.lindstaedt@gmail.com>
@ibc
Copy link
Author

ibc commented May 15, 2016

Yes, #6641 seems to fix it.

MylesBorins pushed a commit that referenced this issue May 16, 2016
@silverwind
doc: fix issues related to page scrolling
06854f1 
Moved the sidebar to a fixed position and moved the main column to the
page's body, which results in back/forward navigation through hash
links and search highlight working again.

Fixes: #6637
Fixes: #6751
Based on: #5716
Reviewed-By: Luigi Pinca <luigipinca@gmail.com>
Reviewed-By: Robert Lindstaedt <robert.lindstaedt@gmail.com>
evanlucas pushed a commit that referenced this issue May 17, 2016
@silverwind @evanlucas
doc: fix issues related to page scrolling
4f2a55f 
Moved the sidebar to a fixed position and moved the main column to the
page's body, which results in back/forward navigation through hash
links and search highlight working again.

Fixes: #6637
Fixes: #6751
Based on: #5716
Reviewed-By: Luigi Pinca <luigipinca@gmail.com>
Reviewed-By: Robert Lindstaedt <robert.lindstaedt@gmail.com>
MylesBorins pushed a commit that referenced this issue May 18, 2016
@silverwind
doc: fix issues related to page scrolling
126fdc3 
Moved the sidebar to a fixed position and moved the main column to the
page's body, which results in back/forward navigation through hash
links and search highlight working again.

Fixes: #6637
Fixes: #6751
Based on: #5716
Reviewed-By: Luigi Pinca <luigipinca@gmail.com>
Reviewed-By: Robert Lindstaedt <robert.lindstaedt@gmail.com>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Assignees
No one assigned
Labels
doc Issues and PRs related to the documentations.
Projects
None yet
Milestone
No milestone
Development

No branches or pull requests
4 participants
@ibc @mscdex @silverwind @lpinca