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

Jump to bottom

Refactor scroll back to top button #1794

Merged
merged 1 commit into from
Jul 17, 2023
Merged

Refactor scroll back to top button #1794

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
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
29 changes: 14 additions & 15 deletions demo/sites/components/scroll-button.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -44,7 +44,8 @@
<br />
<br />

<h1 class="my-0 text-5xl font-medium leading-tight text-neutral-800">
<h1
class="my-0 text-center text-5xl font-medium leading-tight text-neutral-800">
Scroll back to top button
</h1>

Expand All @@ -57,7 +58,7 @@ <h1 class="my-0 text-5xl font-medium leading-tight text-neutral-800">
type="button"
data-te-ripple-init
data-te-ripple-color="light"
class="fixed bottom-5 right-5 inline-block hidden rounded-full bg-red-600 p-3 text-xs font-medium uppercase leading-tight text-white shadow-md transition duration-150 ease-in-out hover:bg-red-700 hover:shadow-lg focus:bg-red-700 focus:shadow-lg focus:outline-none focus:ring-0 active:bg-red-800 active:shadow-lg"
class="!fixed bottom-5 right-5 hidden rounded-full bg-red-600 p-3 text-xs font-medium uppercase leading-tight text-white shadow-md transition duration-150 ease-in-out hover:bg-red-700 hover:shadow-lg focus:bg-red-700 focus:shadow-lg focus:outline-none focus:ring-0 active:bg-red-800 active:shadow-lg"
id="btn-back-to-top">
<svg
aria-hidden="true"
Expand All @@ -75,7 +76,7 @@ <h1 class="my-0 text-5xl font-medium leading-tight text-neutral-800">

<!-- Explanation -->
<div
class="container mt-4 text-center text-neutral-800"
class="container mx-auto mt-4 text-center text-neutral-800"
style="height: 2000px">
<p class="mb-4">
Start scrolling the page and a strong
Expand All @@ -102,30 +103,28 @@ <h1 class="my-0 text-5xl font-medium leading-tight text-neutral-800">
<!-- Custom scripts -->
<script type="text/javascript">
// Get the button
let mybutton = document.getElementById("btn-back-to-top");
const mybutton = document.getElementById("btn-back-to-top");

// When the user scrolls down 20px from the top of the document, show the button
window.onscroll = function () {
scrollFunction();
};

function scrollFunction() {
const scrollFunction = () => {
if (
document.body.scrollTop > 20 ||
document.documentElement.scrollTop > 20
) {
mybutton.style.display = "block";
mybutton.classList.remove("hidden");
} else {
mybutton.style.display = "none";
mybutton.classList.add("hidden");
}
}
};
const backToTop = () => {
window.scrollTo({ top: 0, behavior: "smooth" });
};

// When the user clicks on the button, scroll to the top of the document
mybutton.addEventListener("click", backToTop);

function backToTop() {
document.body.scrollTop = 0;
document.documentElement.scrollTop = 0;
}
window.addEventListener("scroll", scrollFunction);
</script>
</body>
</html>
75 changes: 35 additions & 40 deletions site/content/docs/standard/components/scroll-back-to-top-button/index.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -39,7 +39,7 @@
{{< twsnippet/demo id="example1">}}
<div class="flex justify-center space-x-2">
<a
href="https://tailwind-elements.com/snippets/tailwind/tailwindelements/3681385?view=side#js-tab-view"
href="../../../../previews/scroll-back-to-top-button/preview/"
target="_blank"
type="button"
class="inline-block rounded bg-primary px-6 pb-2 pt-2.5 text-xs font-medium uppercase leading-normal text-white shadow-[0_4px_9px_-4px_#3b71ca] transition duration-150 ease-in-out hover:bg-primary-600 hover:shadow-[0_8px_9px_-4px_rgba(59,113,202,0.3),0_4px_18px_0_rgba(59,113,202,0.2)] focus:bg-primary-600 focus:shadow-[0_8px_9px_-4px_rgba(59,113,202,0.3),0_4px_18px_0_rgba(59,113,202,0.2)] focus:outline-none focus:ring-0 active:bg-primary-700 active:shadow-[0_8px_9px_-4px_rgba(59,113,202,0.3),0_4px_18px_0_rgba(59,113,202,0.2)] dark:shadow-[0_4px_9px_-4px_rgba(59,113,202,0.5)] dark:hover:shadow-[0_8px_9px_-4px_rgba(59,113,202,0.2),0_4px_18px_0_rgba(59,113,202,0.1)] dark:focus:shadow-[0_8px_9px_-4px_rgba(59,113,202,0.2),0_4px_18px_0_rgba(59,113,202,0.1)] dark:active:shadow-[0_8px_9px_-4px_rgba(59,113,202,0.2),0_4px_18px_0_rgba(59,113,202,0.1)]"
Expand All @@ -60,26 +60,25 @@
type="button"
data-te-ripple-init
data-te-ripple-color="light"
class="fixed bottom-5 right-5 inline-block rounded-full bg-danger p-2 uppercase leading-normal text-white shadow-[0_4px_9px_-4px_#dc4c64] transition duration-150 ease-in-out hover:bg-danger-600 hover:shadow-[0_8px_9px_-4px_rgba(220,76,100,0.3),0_4px_18px_0_rgba(220,76,100,0.2)] focus:bg-danger-600 focus:shadow-[0_8px_9px_-4px_rgba(220,76,100,0.3),0_4px_18px_0_rgba(220,76,100,0.2)] focus:outline-none focus:ring-0 active:bg-danger-700 active:shadow-[0_8px_9px_-4px_rgba(220,76,100,0.3),0_4px_18px_0_rgba(220,76,100,0.2)]">
class="!fixed bottom-5 right-5 hidden rounded-full bg-red-600 p-3 text-xs font-medium uppercase leading-tight text-white shadow-md transition duration-150 ease-in-out hover:bg-red-700 hover:shadow-lg focus:bg-red-700 focus:shadow-lg focus:outline-none focus:ring-0 active:bg-red-800 active:shadow-lg"
id="btn-back-to-top">
<svg
aria-hidden="true"
focusable="false"
data-prefix="fas"
class="h-4 w-4"
role="img"
xmlns="http://www.w3.org/2000/svg"
viewBox="0 0 24 24"
fill="currentColor"
stroke-width="2.5"
stroke="currentColor"
class="h-4 w-4">
viewBox="0 0 448 512">
<path
fill-rule="evenodd"
stroke-linecap="round"
stroke-linejoin="round"
d="M12 19.5v-15m0 0l-6.75 6.75M12 4.5l6.75 6.75"
clip-rule="evenodd" />
fill="currentColor"
d="M34.9 289.5l-22.2-22.2c-9.4-9.4-9.4-24.6 0-33.9L207 39c9.4-9.4 24.6-9.4 33.9 0l194.3 194.3c9.4 9.4 9.4 24.6 0 33.9L413 289.4c-9.5 9.5-25 9.3-34.3-.4L264 168.6V456c0 13.3-10.7 24-24 24h-32c-13.3 0-24-10.7-24-24V168.6L69.2 289.1c-9.3 9.8-24.8 10-34.3.4z"></path>
</svg>
</button>

<!-- Explanation -->
<div
class="container mt-4 text-center text-neutral-800 dark:text-neutral-200"
class="container mx-auto mt-4 text-center text-neutral-800"
style="height: 2000px">
<p class="mb-4">
Start scrolling the page and a strong
Expand All @@ -99,57 +98,53 @@
initTE({ Ripple });

// Get the button
let mybutton = document.getElementById("btn-back-to-top");
const mybutton = document.getElementById("btn-back-to-top");

// When the user scrolls down 20px from the top of the document, show the button
window.onscroll = function () {
scrollFunction();
};

function scrollFunction() {
const scrollFunction = () => {
if (
document.body.scrollTop > 20 ||
document.documentElement.scrollTop > 20
) {
mybutton.style.display = "block";
mybutton.classList.remove("hidden");
} else {
mybutton.style.display = "none";
mybutton.classList.add("hidden");
}
}
};
const backToTop = () => {
window.scrollTo({ top: 0, behavior: "smooth" });
};

// When the user clicks on the button, scroll to the top of the document
mybutton.addEventListener("click", backToTop);

function backToTop() {
document.body.scrollTop = 0;
document.documentElement.scrollTop = 0;
}
window.addEventListener("scroll", scrollFunction);
{{< /twsnippet/code >}}
{{< twsnippet/code lang="js" >}}
// Get the button
let mybutton = document.getElementById("btn-back-to-top");
const mybutton = document.getElementById("btn-back-to-top");

// When the user scrolls down 20px from the top of the document, show the button
window.onscroll = function () {
scrollFunction();
};

function scrollFunction() {

const scrollFunction = () => {
if (
document.body.scrollTop > 20 ||
document.documentElement.scrollTop > 20
) {
mybutton.style.display = "block";
mybutton.classList.remove("hidden");
} else {
mybutton.style.display = "none";
mybutton.classList.add("hidden");
}
}
};
const backToTop = () => {
window.scrollTo({ top: 0, behavior: "smooth" });
};

// When the user clicks on the button, scroll to the top of the document
mybutton.addEventListener("click", backToTop);

function backToTop() {
document.body.scrollTop = 0;
document.documentElement.scrollTop = 0;
}

window.addEventListener("scroll", scrollFunction);
{{< /twsnippet/code >}}
{{< /twsnippet/wrapper >}}
</div>
Expand Down
71 changes: 71 additions & 0 deletions site/content/previews/scroll-back-to-top-button/preview/index.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,71 @@
---
title: "Scroll back to top button - example"
date: 2021-04-29T16:00:58+02:00
draft: false
main_title: "Tailwind Scroll back to top button example"
subheading: ""
seo_title: "Tailwind CSS Scroll back to top button"
description: "Scroll back to top button. Free download, AGPL license."
image: "https://tecdn.b-cdn.net/img/components-big.jpg"
video: "https://www.youtube.com/watch?v=-GmnyjgI4Jc&ab_channel=Keepcoding"
url: "previews/scroll-back-to-top-button/preview"
---

<!-- Back to top button -->
<button
type="button"
data-te-ripple-init
data-te-ripple-color="light"
class="!fixed bottom-5 right-5 hidden rounded-full bg-red-600 p-3 text-xs font-medium uppercase leading-tight text-white shadow-md transition duration-150 ease-in-out hover:bg-red-700 hover:shadow-lg focus:bg-red-700 focus:shadow-lg focus:outline-none focus:ring-0 active:bg-red-800 active:shadow-lg"
id="btn-back-to-top">
<svg
aria-hidden="true"
focusable="false"
data-prefix="fas"
class="h-4 w-4"
role="img"
xmlns="http://www.w3.org/2000/svg"
viewBox="0 0 448 512">
<path
fill="currentColor"
d="M34.9 289.5l-22.2-22.2c-9.4-9.4-9.4-24.6 0-33.9L207 39c9.4-9.4 24.6-9.4 33.9 0l194.3 194.3c9.4 9.4 9.4 24.6 0 33.9L413 289.4c-9.5 9.5-25 9.3-34.3-.4L264 168.6V456c0 13.3-10.7 24-24 24h-32c-13.3 0-24-10.7-24-24V168.6L69.2 289.1c-9.3 9.8-24.8 10-34.3.4z"></path>
</svg>
</button>

<!-- Explanation -->
<div
class="container mx-auto mt-4 text-center text-neutral-800"
style="height: 2000px">
<p class="mb-4">
Start scrolling the page and a strong
<strong>"Back to top" button </strong> will appear in the
<strong>bottom right corner</strong> of the screen.
</p>
<p>Click this button and you will be taken to the top of the page.</p>
</div>

<script type="module">
// Get the button
const mybutton = document.getElementById("btn-back-to-top");

// When the user scrolls down 20px from the top of the document, show the button

const scrollFunction = () => {
if (
document.body.scrollTop > 20 ||
document.documentElement.scrollTop > 20
) {
mybutton.classList.remove("hidden");
} else {
mybutton.classList.add("hidden");
}
};
const backToTop = () => {
window.scrollTo({ top: 0, behavior: "smooth" });
};

// When the user clicks on the button, scroll to the top of the document
mybutton.addEventListener("click", backToTop);

window.addEventListener("scroll", scrollFunction);
</script>