scroll to top functionality #5620
Conversation
bintus-ux
force-pushed
the
opentelemetry-devbranch1
branch
from
596ed56
to
3348c39
Compare
chalin
force-pushed
the
opentelemetry-devbranch1
branch
from
c1daa1a
to
2a306b2
Compare
|
Successfully ran npm run check:format. |
assets/scss/_registry.scss
Outdated
|
|
||
| // Scroll-to-top button styling | ||
| .scroll-container { | ||
| text-align: center; | ||
| margin-top: 20px; | ||
| } | ||
|
|
||
| .scroll-btn { | ||
| background-color: #007bff; | ||
| color: white; | ||
| bottom: 40px; | ||
| right: 40px; | ||
| display: none; | ||
| box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2); | ||
| z-index: 1000; | ||
| border-radius: 50%; | ||
| position: fixed; | ||
| } |
There was a problem hiding this comment.
Since these styles are no longer confined to the registry, they should be moved. I think that it's fine to move it to the end of assets/scss/_styles_project.scss.
layouts/partials/hooks/body-end.html
Outdated
| @@ -2,3 +2,48 @@ | |||
| {{ partial "script.html" (dict "src" "js/tracing.js") -}} | |||
| {{ end -}} | |||
| {{ partial "script.html" (dict "src" "js/navScroll.js") -}} | |||
|
|
|||
There was a problem hiding this comment.
Move all of this extra content into it's own partial, say layouts/partials/scroll-to-top.html.
As for the JS, and I think I mentioned this before, do the following:
- Move the JS into its own file, say,
assets/js/scrollToTop.js - Use
layouts/partials/script.htmlto bring in the script content.
There was a problem hiding this comment.
But @svrnm said i handle this differently already
There was a problem hiding this comment.
@bintus-ux can you give more details on your concerns on @chalin's requests? To me they sound like a further improvement on what we have so far.
There was a problem hiding this comment.
Yeah all he just suggested was what i did initially already, i had the scrollToTop.js file in the js folder but you suggested i implement the javascript code on the body-end.html file that way getting rid of the scrollToTop.js file seeing as it was no longer needed, but i am confused now @svrnm
There was a problem hiding this comment.
@bintus-ux no worries, everyone of us is misreading things from time to time and from own experience I know that beign a non-native english speaker adds an additional source of potential misunderstanding, that's why it is always good to ask more questions!
I hope you feel better now!
There was a problem hiding this comment.
Thank you so much for the words mentor, and yes i'm recuperating fast!
…s/scss/_styles_project.scss
…roll-to-top.html and scrollToTop.js file'
There was a problem hiding this comment.
I think it should be hidden in mobile resolutions (using a CSS media declaration to set it it display:none; if width is lower than n pixels)
Also, NN recommends to add a text label, too, and make it appear only after 3 or 4 page scrolls https://www.nngroup.com/articles/back-to-top/
Well noted, on it |
…ux/opentelemetry.io into opentelemetry-devbranch1
|
In this update, I hid the "Top" label text on mobile devices using a CSS media query that sets it to display: none when the screen width is below a specified pixel value (e.g., 768px). Additionally, I implemented functionality where the scroll-to-top button disappears after 2-3 seconds of inactivity, as per your feedback. I also made the text label appear only after the user has scrolled 3-4 pages, following NN's recommendation for improved usability. I would appreciate the team's review please. @svrnm @chalin @theletterf
|
Overview
The Scroll to Top feature enhances the user experience by providing an intuitive way for users to quickly return to the top of the registry page. This is particularly useful for pages with extensive content or long scroll lengths, such as the OpenTelemetry registry page, where users frequently navigate through dense information.
Note: This implementation addresses the same functionality described in an earlier PR (issue number #5331) for the Scroll to Top feature. However, due to issues with submodules in the previous PR, I have created this new PR to ensure proper integration of the feature. The previous PR serves as a reference for the original implementation.