Share your customizations or alterations #8
willfaught
started this conversation in
Show and tell
Replies: 1 comment 1 reply
-
Shortcode for a Scroll To Top ButtonI asked ChatGPT to make me this code then I put it into a shortcode. Please contribute if it could be any better . Example of the up arrow in the bottom right cornerOnly 2 steps
<button onclick="topFunction()"
style="position: fixed; bottom: 20px; right: 30px; font-size: 20px; border: none; outline: none; background-color: #0D6EFD; color: white; cursor: pointer; padding: 10px; border-radius: 12px;"
id="myBtn" title="Go to top">
<i class="fa-solid fa-arrow-up fa-fade" style="font-size: 25px;"></i>
</button>
<script>
// When the user scrolls down 150px from the top of the document, show the button
window.onscroll = function () { scrollFunction() };
function scrollFunction() {
if (document.body.scrollTop > 150 || document.documentElement.scrollTop > 150) {
document.getElementById("myBtn").style.display = "block";
} else {
document.getElementById("myBtn").style.display = "none";
}
}
// When the user clicks on the button, scroll to the top of the document
function topFunction() {
document.body.scrollTop = 0; // For Safari
document.documentElement.scrollTop = 0; // For Chrome, Firefox, IE and Opera
}
</script>
<script src="https://kit.fontawesome.com/e8d1b35a19.js" crossorigin="anonymous"></script>
{{< paige/scrolltotop >}} |
Beta Was this translation helpful? Give feedback.
1 reply
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
-
Code and screenshots are welcome. :)
Beta Was this translation helpful? Give feedback.
All reactions