feat: Adiciona logica para aparecer botao backtotop no scroll
This commit is contained in:
parent
21a8cae899
commit
1169893527
@ -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>
|
||||
);
|
||||
};
|
||||
|
@ -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 |
BIN
react-project/src/components/Footer/assets/svgs/mastercard.png
Normal file
BIN
react-project/src/components/Footer/assets/svgs/mastercard.png
Normal file
Binary file not shown.
After Width: | Height: | Size: 745 B |
@ -85,7 +85,6 @@ const Contato = () => {
|
||||
<Formik
|
||||
onSubmit={(values: IFormikValues, actions) => {
|
||||
Feedback();
|
||||
console.log(values);
|
||||
actions.resetForm();
|
||||
}}
|
||||
initialValues={initialValues}
|
||||
|
Loading…
Reference in New Issue
Block a user