feat: Adiciona logica para aparecer botao backtotop no scroll

This commit is contained in:
Cainã Milech 2023-01-12 09:41:35 -03:00
parent 21a8cae899
commit 1169893527
5 changed files with 25 additions and 12 deletions

View File

@ -1,9 +1,20 @@
import { useState, useEffect } from "react";
import icons from "./assets/modules/FixedIcons.module.scss";
import whats from "./assets/svgs/whatsapp.svg";
import arrow from "./assets/svgs/arrow.svg";
const FixedIcons = () => {
const [scrollTop, setScrollTop] = useState(0);
useEffect(() => {
const handleScroll = () => {
setScrollTop(window.scrollY);
};
window.addEventListener("scroll", handleScroll);
});
return (
<div className={icons["icons"]}>
<a
@ -15,14 +26,16 @@ const FixedIcons = () => {
<img src={whats} alt="Ícone WhatsApp" />
</figure>
</a>
<div
onClick={() => window.scrollTo({ top: 0, behavior: "smooth" })}
className={icons["icons__arrow"]}
>
<figure>
<img src={arrow} alt="Ícone subir ao topo" />
</figure>
</div>
{scrollTop > 0 ? (
<div
onClick={() => window.scrollTo({ top: 0, behavior: "smooth" })}
className={icons["icons__arrow"]}
>
<figure>
<img src={arrow} alt="Ícone subir ao topo" />
</figure>
</div>
) : undefined}
</div>
);
};

View File

@ -2,6 +2,7 @@
position: fixed;
bottom: 200px;
right: 16px;
z-index: 9999;
@media screen and (min-width: 2500px) {
bottom: 215px;

File diff suppressed because one or more lines are too long

Before

Width:  |  Height:  |  Size: 18 KiB

After

Width:  |  Height:  |  Size: 18 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 745 B

View File

@ -85,7 +85,6 @@ const Contato = () => {
<Formik
onSubmit={(values: IFormikValues, actions) => {
Feedback();
console.log(values);
actions.resetForm();
}}
initialValues={initialValues}