diff --git a/src/components/home/BackToTopButton.js b/src/components/home/BackToTopButton.js new file mode 100644 index 00000000..205ea0cc --- /dev/null +++ b/src/components/home/BackToTopButton.js @@ -0,0 +1,39 @@ +import React from 'react'; +import { useEffect, useState } from 'react'; +import { ArrowUpIcon } from '@heroicons/react/outline' + +function BackToTopButton() { + const [backToTopButton, setBackToTopButton] = useState(false); + + useEffect(() =>{ + window.addEventListener("scroll", () => { + if(window.scrollY > 100){ + setBackToTopButton(true) + } else{ + setBackToTopButton(false) + } + }) + }, []) + + const scrollUp = () => { + window.scrollTo({ + top: 0, + behavior: "smooth" + }) + } + + return ( +
+ {backToTopButton && ( + + + + + )} + + +
+ ) +} + +export default BackToTopButton; \ No newline at end of file diff --git a/src/pages/index.js b/src/pages/index.js index a81da218..b3fe2c33 100644 --- a/src/pages/index.js +++ b/src/pages/index.js @@ -1,3 +1,4 @@ +import BackToTopButton from '@/components/home/BackToTopButton' import { BigText, InlineCode, Paragraph, Widont } from '@/components/home/common' import { Features } from '@/components/home/Features' import { Footer } from '@/components/home/Footer' @@ -125,6 +126,7 @@ export default function Home() {
+