feat: add scroll homepage to arrow btn

neerfix · Mar 7, 2022 · b3e4a3a · b3e4a3a
1 parent e7b8aa3
commit b3e4a3a
Showing 1 changed file with 14 additions and 3 deletions.
diff --git a/src/pages/public/Home.jsx b/src/pages/public/Home.jsx
@@ -8,6 +8,17 @@ import {VscChevronDown} from 'react-icons/vsc';
 import PlanetEarthImg from '@/assets/images/homepage/planet-earth.png';
 
 const HomePage = () => {
+
+	function scrollTo(id){
+		var element = document.getElementById(id);
+
+		window.scrollTo({
+			top: element.offsetTop,
+			left: 0,
+			behavior: 'smooth'
+		});
+	}
+
 	return (
 		<div className='bg-beige'>
 			<div id="homepage" className="mx-auto">
@@ -25,7 +36,7 @@ const HomePage = () => {
 						<span className="diamond">◆</span>
 					</div>
 					<div className="relative my-20 w-full">
-						<button className="btn-round mx-auto">
+						<button className="btn-round mx-auto" onClick={() => scrollTo('bloc-map')}>
 							<VscChevronDown />
 						</button>
 					</div>
@@ -38,9 +49,9 @@ const HomePage = () => {
 									Carte des voyages
 								</h2>
 							</div>
-							<button className="btn bg-beige mx-auto my-5">
+							<a className="btn bg-beige mx-auto my-5 w-max" href="/map">
 								<span className="btn-text">Parcourir le monde</span>
-							</button>
+							</a>
 						</div>
 						<div className="earth-visual">
 							<div className="earth-visual-coords w-full">