From 3fc92450531aea08fd88970f6bb97d8072934d06 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Veikko=20Lintuj=C3=A4rvi?= Date: Sat, 12 Nov 2022 12:50:49 +0200 Subject: [PATCH] Scroll to top button --- components/ScrollToTop.tsx | 17 +++++++++++++++++ pages/index.tsx | 9 +++++++++ public/angle-top.png | Bin 0 -> 4805 bytes styles/ScrollToTop.module.scss | 13 +++++++++++++ styles/globals.scss | 1 + 5 files changed, 40 insertions(+) create mode 100644 components/ScrollToTop.tsx create mode 100755 public/angle-top.png create mode 100644 styles/ScrollToTop.module.scss diff --git a/components/ScrollToTop.tsx b/components/ScrollToTop.tsx new file mode 100644 index 0000000..92d6657 --- /dev/null +++ b/components/ScrollToTop.tsx @@ -0,0 +1,17 @@ +import React from 'react'; +import Image from 'next/image'; +import styles from '../styles/ScrollToTop.module.scss'; + +export const ScrollToTop = () => { + return ( + + scroll to top button + + ); +}; diff --git a/pages/index.tsx b/pages/index.tsx index b0efff2..9cc3f84 100644 --- a/pages/index.tsx +++ b/pages/index.tsx @@ -1,6 +1,7 @@ import styles from '../styles/Index.module.scss'; import Image from 'next/image'; import { OpenHours } from '../components/OpenHours'; +import { ScrollToTop } from '../components/ScrollToTop'; export default function Index() { return ( @@ -16,6 +17,7 @@ export default function Index() { alt='main' width={528} height={237} + loading='lazy' />

Kauppa&Ravintola&Kahvila&Baari

@@ -29,6 +31,7 @@ export default function Index() { alt='shop keepers' width={251} height={251} + loading='lazy' /> info@livonsaarenosuuskauppa.fi @@ -43,6 +46,7 @@ export default function Index() { alt='facebook' width={300} height={300} + loading='lazy' /> @@ -53,6 +57,7 @@ export default function Index() { alt='facebook' width={300} height={300} + loading='lazy' /> @@ -86,6 +91,7 @@ export default function Index() { alt='restaurant' width={506} height={89} + loading='lazy' />

Alla kesäkauden tarjoilut

@@ -122,6 +128,7 @@ export default function Index() { alt='yhteystyö' width={496} height={326} + loading='lazy' /> @@ -139,6 +146,8 @@ export default function Index() { + +
); diff --git a/public/angle-top.png b/public/angle-top.png new file mode 100755 index 0000000000000000000000000000000000000000..1c6697e761082ef5e1a723ebf2359867003f360d GIT binary patch literal 4805 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 literal 0 HcmV?d00001 diff --git a/styles/ScrollToTop.module.scss b/styles/ScrollToTop.module.scss new file mode 100644 index 0000000..3a5defa --- /dev/null +++ b/styles/ScrollToTop.module.scss @@ -0,0 +1,13 @@ +.scrollToTopButton { + padding: 1.5rem 3rem; + border-radius: 0.5rem; + transition: all 0.3s; + margin: 1rem; +} + +.scrollToTopButton:hover { + opacity: 0.5; +} + +.scrollToTopImage { +} diff --git a/styles/globals.scss b/styles/globals.scss index 93ed102..671cf35 100644 --- a/styles/globals.scss +++ b/styles/globals.scss @@ -4,6 +4,7 @@ body { margin: 0; font-family: 'Quicksand'; letter-spacing: 0.8px; + scroll-behavior: smooth; } @font-face {