diff --git a/src/app.js b/src/app.js index 70bb6d2..c5c0ae1 100644 --- a/src/app.js +++ b/src/app.js @@ -180,4 +180,24 @@ function initializeSearch() { searchButton.addEventListener('click', () => { displayContributors(searchInput.value); }); -} \ No newline at end of file +} + +// Get the button element +const backToTopBtn = document.getElementById('backToTopBtn'); + +// Show the button when the user scrolls down 100px from the top +window.onscroll = function () { + if (document.body.scrollTop > 100 || document.documentElement.scrollTop > 100) { + backToTopBtn.style.display = "block"; + } else { + backToTopBtn.style.display = "none"; + } +}; + +// Smooth scroll to the top when the button is clicked +backToTopBtn.addEventListener('click', function () { + window.scrollTo({ + top: 0, + behavior: 'smooth' + }); +}); \ No newline at end of file diff --git a/src/contributors.json b/src/contributors.json index b4871b7..dc5b98b 100644 --- a/src/contributors.json +++ b/src/contributors.json @@ -28,5 +28,8 @@ }, { "name": "Bupendra" + }, + { + "name": "Sanket" } ] diff --git a/src/index.html b/src/index.html index fcac720..1e5cb25 100644 --- a/src/index.html +++ b/src/index.html @@ -75,6 +75,9 @@

Participants

+ + + diff --git a/src/style.css b/src/style.css index 1410ad0..8e9b01f 100644 --- a/src/style.css +++ b/src/style.css @@ -284,6 +284,42 @@ footer a:hover { margin-top: 1rem; } +/* Back to Top Button Styles */ +#backToTopBtn { + position: fixed; + bottom: 40px; + right: 40px; + background-color: var(--accent-light); /* Green accent in light mode */ + color: var(--text-light); + border: none; + border-radius: 50px; + padding: 15px 20px; + font-size: 1.5rem; + cursor: pointer; + display: none; /* Hidden by default */ + z-index: 1000; + transition: background-color 0.3s ease, color 0.3s ease, transform 0.3s; + box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1); +} + +#backToTopBtn:hover { + background-color: var(--bg-dark); /* Dark green on hover */ + color: var(--text-dark); /* Light text on hover */ + transform: scale(1.1); /* Button enlarges slightly */ +} + +/* Dark mode styles */ +body.dark-mode #backToTopBtn { + background-color: var(--accent-dark); /* Pink accent in dark mode */ + color: var(--text-dark); +} + +body.dark-mode #backToTopBtn:hover { + background-color: var(--bg-light); /* Light background on hover */ + color: var(--text-light); /* Dark text on hover */ +} + + @keyframes spin { 0% { transform: rotate(0deg);