Skip to content

Commit

Permalink
Merge pull request #1639 from shar2710/backtotop
Browse files Browse the repository at this point in the history
added back to top button
  • Loading branch information
hiteashgupta1 authored Nov 3, 2024
2 parents c33a832 + 3b0a524 commit 8e4a455
Show file tree
Hide file tree
Showing 33 changed files with 1,630 additions and 13 deletions.
49 changes: 49 additions & 0 deletions blog.html
Original file line number Diff line number Diff line change
Expand Up @@ -1623,6 +1623,55 @@ <h2 class="footer-title secondary-title mt-5">Connect with us</h2>
<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>
<script src="script.js"></script>
<div id="back-to-top" class="back-to-top">
<i class="fas fa-chevron-up"></i>
</div>

<style>
.back-to-top {
position: fixed;
bottom: 20px;
right: 20px;
width: 50px;
height: 50px;
background-color: #007bff;
color: white;
border-radius: 50%;
display: flex;
justify-content: center;
align-items: center;
cursor: pointer;
box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
transition: opacity 0.3s;
opacity: 0;
visibility: hidden;
}

.back-to-top.show {
opacity: 1;
visibility: visible;
}
</style>

<script>
const backToTopButton = document.getElementById('back-to-top');

window.addEventListener('scroll', () => {
if (window.scrollY > 300) {
backToTopButton.classList.add('show');
} else {
backToTopButton.classList.remove('show');
}
});

backToTopButton.addEventListener('click', ()=>{
window.scrollTo({
top: 0,
behavior:'smooth'
});
});
</script>


</body>

Expand Down
50 changes: 50 additions & 0 deletions bookmarks.html
Original file line number Diff line number Diff line change
Expand Up @@ -319,5 +319,55 @@ <h2 class="footer-title secondary-title mt-2">Connect with us</h2>
<div class="gtranslate_wrapper"></div>
<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>
<div id="back-to-top" class="back-to-top">
<i class="fas fa-chevron-up"></i>
</div>

<style>
.back-to-top {
position: fixed;
bottom: 20px;
right: 20px;
width: 50px;
height: 50px;
background-color: #007bff;
color: white;
border-radius: 50%;
display: flex;
justify-content: center;
align-items: center;
cursor: pointer;
box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
transition: opacity 0.3s;
opacity: 0;
visibility: hidden;
}

.back-to-top.show {
opacity: 1;
visibility: visible;
}
</style>

<script>
const backToTopButton = document.getElementById('back-to-top');

window.addEventListener('scroll', () => {
if (window.scrollY > 300) {
backToTopButton.classList.add('show');
} else {
backToTopButton.classList.remove('show');
}
});

backToTopButton.addEventListener('click', ()=>{
window.scrollTo({
top: 0,
behavior:'smooth'
});
});
</script>


</body>
</html>
49 changes: 49 additions & 0 deletions category.html
Original file line number Diff line number Diff line change
Expand Up @@ -959,6 +959,55 @@ <h2 class="footer-title secondary-title mt-5">Connect with us</h2>
const app = new Vue({
el: '#app' });
</script>
<div id="back-to-top" class="back-to-top">
<i class="fas fa-chevron-up"></i>
</div>

<style>
.back-to-top {
position: fixed;
bottom: 20px;
right: 20px;
width: 50px;
height: 50px;
background-color: #007bff;
color: white;
border-radius: 50%;
display: flex;
justify-content: center;
align-items: center;
cursor: pointer;
box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
transition: opacity 0.3s;
opacity: 0;
visibility: hidden;
}

.back-to-top.show {
opacity: 1;
visibility: visible;
}
</style>

<script>
const backToTopButton = document.getElementById('back-to-top');

window.addEventListener('scroll', () => {
if (window.scrollY > 300) {
backToTopButton.classList.add('show');
} else {
backToTopButton.classList.remove('show');
}
});

backToTopButton.addEventListener('click', ()=>{
window.scrollTo({
top: 0,
behavior:'smooth'
});
});
</script>


</body>

Expand Down
50 changes: 50 additions & 0 deletions chatbot.html
Original file line number Diff line number Diff line change
Expand Up @@ -273,5 +273,55 @@
loader.style.display = "none";
});
</script>
<div id="back-to-top" class="back-to-top">
<i class="fas fa-chevron-up"></i>
</div>

<style>
.back-to-top {
position: fixed;
bottom: 20px;
right: 20px;
width: 50px;
height: 50px;
background-color: #007bff;
color: white;
border-radius: 50%;
display: flex;
justify-content: center;
align-items: center;
cursor: pointer;
box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
transition: opacity 0.3s;
opacity: 0;
visibility: hidden;
}

.back-to-top.show {
opacity: 1;
visibility: visible;
}
</style>

<script>
const backToTopButton = document.getElementById('back-to-top');

window.addEventListener('scroll', () => {
if (window.scrollY > 300) {
backToTopButton.classList.add('show');
} else {
backToTopButton.classList.remove('show');
}
});

backToTopButton.addEventListener('click', ()=>{
window.scrollTo({
top: 0,
behavior:'smooth'
});
});
</script>


</body>
</html>
51 changes: 50 additions & 1 deletion comment1.html
Original file line number Diff line number Diff line change
Expand Up @@ -433,6 +433,55 @@ <h2 class="footer-title secondary-title mt-2">Connect with us</h2>
<p>&copy; <span id="current-year"></span> WordWise. All rights reserved.</p>
</div>
</div>
</footer>
</footer><div id="back-to-top" class="back-to-top">
<i class="fas fa-chevron-up"></i>
</div>

<style>
.back-to-top {
position: fixed;
bottom: 20px;
right: 20px;
width: 50px;
height: 50px;
background-color: #007bff;
color: white;
border-radius: 50%;
display: flex;
justify-content: center;
align-items: center;
cursor: pointer;
box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
transition: opacity 0.3s;
opacity: 0;
visibility: hidden;
}

.back-to-top.show {
opacity: 1;
visibility: visible;
}
</style>

<script>
const backToTopButton = document.getElementById('back-to-top');

window.addEventListener('scroll', () => {
if (window.scrollY > 300) {
backToTopButton.classList.add('show');
} else {
backToTopButton.classList.remove('show');
}
});

backToTopButton.addEventListener('click', ()=>{
window.scrollTo({
top: 0,
behavior:'smooth'
});
});
</script>


</body>
</html>
51 changes: 50 additions & 1 deletion comment10.html
Original file line number Diff line number Diff line change
Expand Up @@ -431,6 +431,55 @@ <h2 class="footer-title secondary-title mt-2">Connect with us</h2>
<p>&copy; <span id="current-year"></span> WordWise. All rights reserved.</p>
</div>
</div>
</footer>
</footer><div id="back-to-top" class="back-to-top">
<i class="fas fa-chevron-up"></i>
</div>

<style>
.back-to-top {
position: fixed;
bottom: 20px;
right: 20px;
width: 50px;
height: 50px;
background-color: #007bff;
color: white;
border-radius: 50%;
display: flex;
justify-content: center;
align-items: center;
cursor: pointer;
box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
transition: opacity 0.3s;
opacity: 0;
visibility: hidden;
}

.back-to-top.show {
opacity: 1;
visibility: visible;
}
</style>

<script>
const backToTopButton = document.getElementById('back-to-top');

window.addEventListener('scroll', () => {
if (window.scrollY > 300) {
backToTopButton.classList.add('show');
} else {
backToTopButton.classList.remove('show');
}
});

backToTopButton.addEventListener('click', ()=>{
window.scrollTo({
top: 0,
behavior:'smooth'
});
});
</script>


</body>
</html>
51 changes: 50 additions & 1 deletion comment11.html
Original file line number Diff line number Diff line change
Expand Up @@ -429,6 +429,55 @@ <h2 class="footer-title secondary-title mt-2">Connect with us</h2>
<p>&copy; <span id="current-year"></span> WordWise. All rights reserved.</p>
</div>
</div>
</footer>
</footer><div id="back-to-top" class="back-to-top">
<i class="fas fa-chevron-up"></i>
</div>

<style>
.back-to-top {
position: fixed;
bottom: 20px;
right: 20px;
width: 50px;
height: 50px;
background-color: #007bff;
color: white;
border-radius: 50%;
display: flex;
justify-content: center;
align-items: center;
cursor: pointer;
box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
transition: opacity 0.3s;
opacity: 0;
visibility: hidden;
}

.back-to-top.show {
opacity: 1;
visibility: visible;
}
</style>

<script>
const backToTopButton = document.getElementById('back-to-top');

window.addEventListener('scroll', () => {
if (window.scrollY > 300) {
backToTopButton.classList.add('show');
} else {
backToTopButton.classList.remove('show');
}
});

backToTopButton.addEventListener('click', ()=>{
window.scrollTo({
top: 0,
behavior:'smooth'
});
});
</script>


</body>
</html>
Loading

1 comment on commit 8e4a455

@vercel
Copy link

@vercel vercel bot commented on 8e4a455 Nov 3, 2024

Choose a reason for hiding this comment

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

Please sign in to comment.