Skip to content

Fix button overlap #2027

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

Open
abbyjouett1 wants to merge 2 commits into
base: main
Choose a base branch
from
Open

Fix button overlap #2027

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
2c88543
Fixed scroll to top button style and behavior
abbyjouett1 Feb 17, 2026
9f8177e
Fixed scroll to top button style and behavior
abbyjouett1 Feb 17, 2026
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
46 changes: 24 additions & 22 deletions index.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -668,20 +668,7 @@ <h2 class="text-3xl font-bold text-white text-center relative z-10 text_3">CONTA
</div>
</form>
</div>

<!-- Dark Mode Toggle Button -->
<div class="fixed bottom-4 right-4">
<button id="darkModeToggle" class="bg-gray-200 dark:bg-gray-700 p-2 rounded-full shadow-lg hover:bg-gray-300 dark:hover:bg-gray-600 transition-all duration-200">
<!-- Sun icon (for dark mode) -->
<svg xmlns="http://www.w3.org/2000/svg" class="h-6 w-6 text-amber-600 dark:hidden" fill="none" viewBox="0 0 24 24" stroke="currentColor">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 3v1m0 16v1m9-9h-1M4 12H3m15.364 6.364l-.707-.707M6.343 6.343l-.707-.707m12.728 0l-.707.707M6.343 17.657l-.707.707M16 12a4 4 0 11-8 0 4 4 0 018 0z" />
</svg>
<!-- Moon icon (for light mode) -->
<svg xmlns="http://www.w3.org/2000/svg" class="h-6 w-6 text-gray-200 hidden dark:block" fill="none" viewBox="0 0 24 24" stroke="currentColor">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M20.354 15.354A9 9 0 018.646 3.646 9.003 9.003 0 0012 21a9.003 9.003 0 008.354-5.646z" />
</svg>
</button>
</div>


<!-- Validation Scripts -->
<script>
Expand Down Expand Up @@ -745,6 +732,28 @@ <h2 class="text-3xl font-bold text-white text-center relative z-10 text_3">CONTA
});
</script>
</section>

<!-- Scroll to Top Button -->
<button id="bttbutton" class="fixed bottom-4 w-10 h-10 bg-amber-500 dark:bg-amber-600 rounded-full shadow-lg hover:bg-amber-600 dark:hover:bg-amber-700 transition-all duration-200 flex items-center justify-center hidden" style="right: 4rem;" title="Back to top">
<svg xmlns="http://www.w3.org/2000/svg" class="h-6 w-6 text-white" fill="none" viewBox="0 0 24 24" stroke="currentColor">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 15l7-7 7 7"/>
</svg>
</button>


<!-- Dark Mode Toggle Button -->
<div class="fixed bottom-4 right-4">
<button id="darkModeToggle" class="w-10 h-10 bg-gray-200 dark:bg-gray-700 rounded-full shadow-lg hover:bg-gray-300 dark:hover:bg-gray-600 transition-all duration-200 flex items-center justify-center">
<!-- Sun icon (for dark mode) -->
<svg xmlns="http://www.w3.org/2000/svg" class="h-6 w-6 text-amber-600 dark:hidden" fill="none" viewBox="0 0 24 24" stroke="currentColor">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 3v1m0 16v1m9-9h-1M4 12H3m15.364 6.364l-.707-.707M6.343 6.343l-.707-.707m12.728 0l-.707.707M6.343 17.657l-.707.707M16 12a4 4 0 11-8 0 4 4 0 018 0z" />
</svg>
<!-- Moon icon (for light mode) -->
<svg xmlns="http://www.w3.org/2000/svg" class="h-6 w-6 text-gray-200 hidden dark:block" fill="none" viewBox="0 0 24 24" stroke="currentColor">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M20.354 15.354A9 9 0 018.646 3.646 9.003 9.003 0 0012 21a9.003 9.003 0 008.354-5.646z" />
</svg>
</button>
</div>

<script>
window.addEventListener("scroll", function () {
Expand Down Expand Up @@ -919,14 +928,7 @@ <h3 class="text-2xl text-center" style="color:#f1f5f9">Subscribe to our newslett
<!-- Social icons end -->

<!-- Scroll to top -->
<div class="md:pr-8 hover-effect">
<a href="#top">
<button id="bttbutton" title="backtotop">
<img src="./image.svg" class="w-6 md:w-10 md:object-left sm:w-10" />
</button>
</a>
</div>
<!-- Scroll to top -->

</div>

<div class="pt-5 pb-8 flex flex-col text-center md:hidden mt-8 items-center flex-1">
Expand Down
18 changes: 13 additions & 5 deletions index.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -26,19 +26,24 @@ function displayContributors(contributorsList) {
function hideBackToTopButton() {
const bttButton = document.getElementById("bttbutton");

bttButton.addEventListener("click", (e) => {
bttButton.addEventListener("click", () => {
window.scrollTo({
top: 0,
left: 0,
behavior: "smooth",
});
});

window.addEventListener("scroll", (e) => {
bttButton.style.display = window.scrollY > 15 ? "block" : "none";
window.addEventListener("scroll", () => {
if (window.scrollY > 100) {
bttButton.classList.remove("hidden");
} else {
bttButton.classList.add("hidden");
}
});
}


// get contributors list from github API
async function getContributorsList() {
try {
Expand All @@ -50,8 +55,11 @@ async function getContributorsList() {
}
}

hideBackToTopButton();
getContributorsList();
document.addEventListener("DOMContentLoaded", () => {
hideBackToTopButton();
getContributorsList();
});


function googleTranslateElementInit() {
new google.translate.TranslateElement(
Expand Down