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.

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

[HTML Theme]: Add "Navigate to Top" Button #12618

Closed

Conversation

kavania2002
Copy link

@kavania2002 kavania2002 commented Jul 18, 2024

Feature

  • Feature

Purpose

  • Provide a quick and convenient way for users to return to the top of the page
  • Eliminate the need for excessive scrolling, especially on long pages
  • Improve overall user experience and accessibility

Detail

  • Inspired by the navigation feature in the Furo theme
  • Implementation:
    • Custom CSS for styling the button
    • Custom JavaScript for button functionality
    • Button positioned at the bottom centre of the page
    • Smooth scrolling animation when the button is clicked
  • Current behaviour: Scrolls to the top of the page when clicked

Relates

sphinx/themes/basic/layout.html Outdated Show resolved Hide resolved
sphinx/themes/basic/static/navigate_top.js Outdated Show resolved Hide resolved
sphinx/themes/basic/static/navigate_top.js Show resolved Hide resolved
Copy link
Member

@picnixz picnixz left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Could we have some visual examples? maybe a GIF showing how it renders?

Also, how do you enable / disable the feature actually? I think you need to setup the configuration file of the theme as well with an additional boolean (and document it as well in the RST files)

@kavania2002
Copy link
Author

kavania2002 commented Jul 24, 2024

I haven't added anything that enable/disable this button. I'll have to dive deep to see how this can be achieved. Can you provide me some guidance for the same?

And, currently it looks like this -

navigate_to_top_recording.mov

@picnixz
Copy link
Member

picnixz commented Aug 5, 2024

I didn't forget about you but I am travelling this week. I'll be able to provide guidance in 10 days or so (or someone else can if they have time). So don't worry about me not replying! By the way, I like how it currently renders (we need to make the button a bit.. less crude but the overall idea is fine).

@mgeier
Copy link
Contributor

mgeier commented Aug 13, 2024

I don't think this should be part of basic, but it would be fine to add this to some of the built-in themes.

@@ -11,6 +11,10 @@

/* -- main layout ----------------------------------------------------------- */

html {
scroll-behavior: smooth;
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I don't think this is something we should force onto every derived theme.

Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

HTML specifies the #top anchor which seems simpler than this script.

@AA-Turner
Copy link
Member

I agree with Matthias (@mgeier) that this isn't wanted in every theme. Perhaps you could propose a PR to add it to sphinx13 and add a recipe for it to the docs in a tutorial?

I'll close this PR for now, though.

A

@AA-Turner AA-Turner closed this Oct 21, 2024
@github-actions github-actions bot locked as resolved and limited conversation to collaborators Nov 19, 2024
Sign up for free to subscribe to this conversation on GitHub. Already have an account? Sign in.
Projects
None yet
Development

Successfully merging this pull request may close these issues.

[HTML theme] add "Navigate to the Top" button
4 participants