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

Similar Top scroll button on every page #899

Merged
merged 2 commits into from
Nov 4, 2024
Merged

Similar Top scroll button on every page #899

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
17ebf60
Similar Top scroll button on every page
rutikakengal Nov 2, 2024
e7a6577
Merge branch 'main' into Top-scroll-button-fixed
rutikakengal Nov 3, 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
17 changes: 4 additions & 13 deletions about.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -455,18 +455,6 @@ <h1>About Us 🚀</h1>

</style>
<script>
// Get the button
const scrollToTopBtn = document.getElementById("scrollToTopBtn");

// Show the button when scrolling down 20px from the top
window.onscroll = function() {
if (document.body.scrollTop > 20 || document.documentElement.scrollTop > 20) {
scrollToTopBtn.style.display = "flex";
} else {
scrollToTopBtn.style.display = "none";
}
};

// toggle chatbot function
function toggleChatbot() {
const chatbotContainer = document.getElementById("chatbot-container");
Expand All @@ -478,8 +466,11 @@ <h1>About Us 🚀</h1>
const progressHeight = (window.scrollY / totalHeight) * 100;
scrollProgressBar.style.width = progressHeight + '%';
});

</script>

<button onclick="moveToTop()" id="topBtn" title="Go to top" style="display:flex; position: fixed; right: 30px; z-index: 100000;">
<i class="fa fa-arrow-up" aria-hidden="true"></i>
</button>

<footer class="footer-container">
<div class="footer-top">
Expand Down
4 changes: 4 additions & 0 deletions contact.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -302,6 +302,10 @@ <h4>Phone No</h4>
}

</script>

<button onclick="moveToTop()" id="topBtn" title="Go to top" style="display:flex; position: fixed; right: 30px; z-index: 100000;">
<i class="fa fa-arrow-up" aria-hidden="true"></i>
</button>

<footer class="footer-container">
<div class="footer-top">
Expand Down
25 changes: 4 additions & 21 deletions contactus.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -302,22 +302,6 @@
color: #fff;
}

/* Scroll Back Button */
#scrollToTop {
position: fixed;
bottom: 30px;
right: 30px;
background-color: #ff8c00;
color: white;
border: none;
border-radius: 5px;
padding: 10px 15px;
cursor: pointer;
display: none; /* Hidden by default */
z-index: 1000;
}


/* Animation */
@keyframes fadeIn {
from {
Expand Down Expand Up @@ -383,6 +367,10 @@ <h2>Contact Us</h2>
</div>
</section>

<button onclick="moveToTop()" id="topBtn" title="Go to top" style="display:flex; position: fixed; right: 30px; z-index: 100000;">
<i class="fa fa-arrow-up" aria-hidden="true"></i>
</button>

<!-- Footer Section -->
<footer class="footer-container">
<div class="footer-top">
Expand Down Expand Up @@ -873,11 +861,6 @@ <h4>FIND US</h4>
}
}
</style>


<!-- Scroll to Top Button -->
<button id="scrollToTop" onclick="scrollToTop()">↑</button>

<script>
const trustedDomains = [
'gmail.com',
Expand Down
63 changes: 5 additions & 58 deletions contributor.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -182,9 +182,9 @@
<script>window.gtranslateSettings = {"default_language":"en","detect_browser_language":true,"wrapper_selector":".gtranslate_wrapper"}</script>
<script src="https://cdn.gtranslate.net/widgets/latest/float.js" defer></script>

<button id="scrollToTopBtn" class="scroll-to-top" title="Go to top">
&#8593; <!-- This is the up arrow -->
</button>
<button onclick="moveToTop()" id="topBtn" title="Go to top" style="display:flex; position: fixed; right: 30px; z-index: 100000;">
<i class="fa fa-arrow-up" aria-hidden="true"></i>
</button>
<style>
body {
font-family: Arial, sans-serif;
Expand All @@ -195,51 +195,7 @@
.content {
padding: 20px;
}

.scroll-to-top {
position: fixed;
bottom: 120px;
right: 35px;
background-color: red;
color: white;
border: none;
border-radius: 50%;
width: 50px;
height: 50px;
font-size: 24px;
cursor: pointer;
display: none; /* Initially hidden */
align-items: center;
justify-content: center;
}

.scroll-to-top:hover {
background-color: darkred; /* Darker red on hover */
}

</style>
<script>
// Get the button
const scrollToTopBtn = document.getElementById("scrollToTopBtn");

// Show the button when scrolling down 20px from the top
window.onscroll = function() {
if (document.body.scrollTop > 20 || document.documentElement.scrollTop > 20) {
scrollToTopBtn.style.display = "flex";
} else {
scrollToTopBtn.style.display = "none";
}
};

// Scroll to top function
scrollToTopBtn.onclick = function() {
window.scrollTo({
top: 0,
behavior: "smooth" // Smooth scroll effect
});
};

</script>
<!--chat bot-->
<button onclick="toggleChatbot()" id="chatbotBtn" title="chat bot"></button>

Expand Down Expand Up @@ -319,17 +275,8 @@ <h2>Meet Our Contributors</h2>
<form id="subscribeForm">

</form>
<div id="notification" class="contributor-notification contributor-hidden"></div>






</div>



<div id="notification" class="contributor-notification contributor-hidden"></div>
</div>
<footer class="footer-container">
<div class="footer-top">

Expand Down