import React, { useRef } from
"react"
;
import { Heading, Button, Para, Margin } from
"./Styles"
;
const ScrollPage = () => {
const ServicesRef = useRef(
null
);
const gotoServices = () =>
window.scrollTo({
top: ServicesRef.current.offsetTop,
behavior:
"smooth"
,
});
return
(
<div>
<Heading>GeeksForGeeks</Heading>
<Button onClick={gotoServices}>Scroll to Services</Button>
<Margin ref={ServicesRef}>
<Heading>GeeksForGeeks Services</Heading>
<Para>
Lorem Ipsum è un testo segnaposto utilizzato
nel settore della tipografia e della stampa.
Lorem Ipsum è considerato il testo segnaposto
standard sin dal sedicesimo secolo, quando un anonimo
tipografo prese una cassetta di caratteri e li
assemblò per preparare un testo campione. È
sopravvissuto non solo a più di cinque secoli, ma
anche al passaggio alla videoimpaginazione, pervenendoci
sostanzialmente inalterato. Fu reso popolare, negli
anni ’60, con la diffusione dei fogli di caratteri
trasferibili “Letraset”, che contenevano passaggi del
Lorem Ipsum, e più recentemente da software
di impaginazione come Aldus PageMaker, che includeva
versioni del Lorem Ipsum.
</Para>
<Para>
Lorem Ipsum è un testo segnaposto utilizzato nel
settore della tipografia e della stampa. Lorem
Ipsum è considerato il testo segnaposto standard
sin dal sedicesimo secolo, quando un anonimo tipografo
prese una cassetta di caratteri e li assemblò per preparare
un testo campione. È sopravvissuto non solo a più di
cinque secoli, ma anche al passaggio alla videoimpaginazione,
pervenendoci sostanzialmente inalterato. Fu reso popolare,
negli anni ’60, con la diffusione dei fogli di caratteri
trasferibili “Letraset”, che contenevano passaggi del Lorem
Ipsum, e più recentemente da software di impaginazione come
Aldus PageMaker, che includeva versioni del Lorem Ipsum.
</Para>
</Margin>
</div>
);
};
export
default
ScrollPage;