mirror/formbricks
1
0
Fork 0
mirror of https://github.com/formbricks/formbricks.git synced 2026-03-13 11:09:29 -05:00
Code Issues Packages Projects Releases 138 Wiki Activity

fix: added scroll to top button (#1153)

Browse Source 
Co-authored-by: Johannes <johannes@formbricks.com>
This commit is contained in:
Vaibhav Bhardwaj
2023-10-14 21:16:48 +05:30
committed by GitHub
parent f9a254e295
commit 0cadc279d5
2 changed files with 46 additions and 0 deletions
Download Patch File Download Diff File Expand all files Collapse all files

44
apps/formbricks-com/components/home/ScrollToTop.tsx Normal file
View File

@@ -0,0 +1,44 @@
import { Button } from "@formbricks/ui/Button";
import { ArrowUpIcon } from "@heroicons/react/24/solid";
import throttle from "lodash/throttle";
import { useCallback, useEffect, useState } from "react";
const ScrollToTopButton = () => {
const [visible, setVisible] = useState(false);
const scrollToTop = useCallback(() => {
window.scrollTo({
top: 0,
behavior: "smooth",
});
}, []);
useEffect(() => {
const toggleVisible = () => {
const scrolled = document.documentElement.scrollTop;
if (scrolled > 500) {
setVisible(true);
} else if (scrolled <= 500) {
setVisible(false);
}
};
const throttledToggleVisible = throttle(toggleVisible, 200);
window.addEventListener("scroll", throttledToggleVisible);
return () => window.removeEventListener("scroll", throttledToggleVisible);
}, []);
return (
<div className="fixed bottom-20 right-10 z-50" style={{ display: visible ? "inline" : "none" }}>
<Button
className="flex w-12 items-center justify-center bg-slate-900/10 px-1 py-2 hover:bg-slate-900/20 hover:opacity-100 dark:bg-slate-50/5 dark:hover:bg-slate-50/30"
onClick={scrollToTop}>
<ArrowUpIcon className="h-6 w-6 text-slate-900 dark:text-slate-50" />
</Button>
</div>
);
};
export default ScrollToTopButton;

2
apps/formbricks-com/pages/index.tsx
View File

@@ -3,6 +3,7 @@ import Features from "@/components/home/Features";
import GitHubSponsorship from "@/components/home/GitHubSponsorship";
import Hero from "@/components/home/Hero";
import Highlights from "@/components/home/Highlights";
import ScrollToTopButton from "@/components/home/ScrollToTop";
import Steps from "@/components/home/Steps";
import BestPractices from "@/components/shared/BestPractices";
import BreakerCTA from "@/components/shared/BreakerCTA";
@@ -19,6 +20,7 @@ const IndexPage = () => (
<BestPractices />
<Features />
<Highlights />
<ScrollToTopButton />
<div className="block lg:hidden">
<GitHubSponsorship />
</div>