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

scroll to top functionality #5620

Open
wants to merge 17 commits into
base: main
Choose a base branch
from
+181 −13
Open

scroll to top functionality #5620

Show file tree
Hide file tree
Changes from 6 commits
Commits
Show all changes
17 commits
Select commit Hold shift + click to select a range
92598a3
scroll to top functionality
bintus-ux Nov 18, 2024
592568c
'scroll to top functionality fix'
bintus-ux Nov 18, 2024
ef86638
'fix'
bintus-ux Nov 18, 2024
30fcb29
'fix'
bintus-ux Nov 18, 2024
4721fb3
reverting change in body-end.html
bintus-ux Nov 19, 2024
2a306b2
updated _registry.scss file
bintus-ux Nov 19, 2024
2d93e09
'moving scrollToTop css code from assets/scss/_registry.scss to asset…
bintus-ux Nov 19, 2024
5e51f8b
'fix'
bintus-ux Nov 19, 2024
fed3dd0
'fix for scrollToTop creating it's own partial in layouts/partials/s…
bintus-ux Nov 19, 2024
f9efe04
'format fix'
bintus-ux Nov 19, 2024
6f0b308
fix for scrolltotop button
bintus-ux Nov 20, 2024
518293f
Update body-end.html
bintus-ux Nov 19, 2024
fa49f48
Updated scroll-to-top functionality and styling
bintus-ux Dec 4, 2024
7ece877
Remove existing opentelemetry-java-examples submodule
bintus-ux Dec 15, 2024
794e07b
Re-adding opentelemetry-java-examples submodule
bintus-ux Dec 15, 2024
40da502
Revert .gitmodules
bintus-ux Dec 15, 2024
cb6f411
fix
bintus-ux Dec 15, 2024
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
18 changes: 18 additions & 0 deletions assets/scss/_registry.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -39,3 +39,21 @@
.registry-entry {
@extend .shadow;
}

// 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;
}
Copy link
Contributor

Choose a reason for hiding this comment

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

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.

Copy link
Author

Choose a reason for hiding this comment

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

Done. @chalin

45 changes: 45 additions & 0 deletions layouts/partials/hooks/body-end.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -2,3 +2,48 @@
{{ partial "script.html" (dict "src" "js/tracing.js") -}}
{{ end -}}
{{ partial "script.html" (dict "src" "js/navScroll.js") -}}

Copy link
Contributor

Choose a reason for hiding this comment

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

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.html to bring in the script content.

Copy link
Author

Choose a reason for hiding this comment

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

But @svrnm said i handle this differently already

Copy link
Member

Choose a reason for hiding this comment

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

@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.

Copy link
Author

Choose a reason for hiding this comment

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

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

Copy link
Author

Choose a reason for hiding this comment

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

My apologies @svrnm @chalin i took my time to re-read the whole conversation and realized i got it mixed up, totally understand now, sorry for the misunderstanding (i have been feverish the past few days). Implementing the changes right now. Thanks so much.

Copy link
Member

Choose a reason for hiding this comment

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

@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!

Copy link
Author

Choose a reason for hiding this comment

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

Thank you so much for the words mentor, and yes i'm recuperating fast!

<!-- Scroll-to-Top Button -->
<div class="scroll-container">
<button id="scrollToTopBtn" class="scroll-btn btn" aria-label="Scroll to top" title="Scroll to top">
<i class="fas fa-arrow-up"></i>
</button>
</div>

<script>
// Scroll-to-Top Functionality
document.addEventListener("DOMContentLoaded", function () {
let scrollToTopBtn = document.getElementById("scrollToTopBtn");
let footer = document.querySelector(".td-footer");

if (!scrollToTopBtn || !footer) return;

function adjustButtonPosition() {
let footerTop = footer.getBoundingClientRect().top;
let windowHeight = window.innerHeight;

if (footerTop < windowHeight + 40) {
scrollToTopBtn.style.bottom = windowHeight - footerTop + 40 + "px";
} else {
scrollToTopBtn.style.bottom = "40px";
}
}

window.onscroll = function () {
if (
document.body.scrollTop > 200 ||
document.documentElement.scrollTop > 200
) {
scrollToTopBtn.style.display = "block";
} else {
scrollToTopBtn.style.display = "none";
}

adjustButtonPosition();
};

scrollToTopBtn.onclick = function () {
window.scrollTo({ top: 0, behavior: "smooth" });
};
});
</script>