Articolo originale: https://www.freecodecamp.org/news/scroll-to-top-bottom-and-particular-section-with-react/
Quando sviluppi siti Web e applicazioni utilizzando React e qualsiasi framework React, vorrai aggiungere alcune funzionalità per aiutare i tuoi utenti a navigare nel tuo sito.
Queste funzionalità includono i pulsanti di scorrimento verso l'alto e verso il basso, nonché la possibilità di scorrere in qualsiasi punto della pagina. Queste funzionalità sono semplici da implementare e non è nemmeno necessario utilizzare una libreria esterna.
Ecco cosa costruiremo:
Come scorrere verso l'alto con React
Esistono diverse librerie e plug-in che puoi utilizzare per aggiungere semplicemente la funzione di scorrimento verso l'alto in React. Ma qui, vedremo come implementare facilmente la funzionalità di scorrimento verso l'alto senza utilizzare alcuna libreria.
Iniziamo…
Come implementare la logica
In questo tutorial, sfrutteremo gli hook React useState() e useEffect() per gestire rapidamente questa logica.
Ti consiglio di rendere riutilizzabile questa funzionalità creando un nuovo componente per gestirla. Ad esempio, creerò un componente chiamato ScrollToTop.js .
In questo componente, importeremo prima gli hook useState() e useEffect() di React, seguiti dalla creazione di uno stato per controllare la visibilità del pulsante di scorrimento verso l'alto. Tieni presente che questo è utile solo se desideri che il pulsante venga visualizzato dopo che l'utente ha eseguito uno scorrimento verso il basso per un po' e poi scompaia quando l'utente scorre di nuovo verso l'alto.
Questo stato verrà impostato su false come valore predefinito.
const [showTopBtn, setShowTopBtn] = useState(false);Il passaggio successivo consiste nell'utilizzare l'hook useEffect() per gestire la logica che decide quando il pulsante deve essere visualizzato e quando deve scomparire.
Quando l'utente scorre la pagina, utilizzeremo addEventListener() per ascoltare un evento di scorrimento. La funzione di callback visualizzerà il pulsante impostando lo stato showTopBtn su true se la posizione di scorrimento verticale è maggiore del valore specificato (in questo caso, 400), altrimenti lo imposterà false e non lo visualizzerà.
useEffect(() => {
window.addEventListener('scroll', () => {
if (window.scrollY > 400) {
setShowTopBtn(true);
} else {
setShowTopBtn(false);
}
});
}, []);Tieni presente che questo continuerà a funzionare mentre scorri verso il basso nel sito Web. Di conseguenza, il secondo parametro dell'hook useEffect() è un array vuoto ([]).
Finora, siamo stati in grado di controllare quando appare il nostro pulsante "scorri verso l'alto" e quando no. Il passo successivo è scrivere la logica fondamentale che fa scorrere la pagina verso l'alto una volta cliccato il pulsante.
Per fare ciò, scriveremo una funzione che verrà chiamata ogni volta che l'utente fa clic sul pulsante di scorrimento verso l'alto. Useremo il metodo window.scrollTo() di JavaScript per farlo. È una tecnica per scorrere una pagina Web fino a un determinato insieme di coordinate nel documento.
const goToTop = () => {
window.scrollTo({
top: 0,
behavior: 'smooth',
});
};
Nota: window.scrollTo() supporta anche un'opzione behavior, che specifica se lo scorrimento deve muoversi dolcemente (in modo fluido) o avvenire istantaneamente in un solo salto (il valore predefinito auto).
A questo punto, abbiamo implementato con successo tutta la logica necessaria per creare un pulsante di “scorri verso l'alto” con React. Successivamente aggiungeremo il metodo onclick() al pulsante nel nostro markup.
Se hai seguito correttamente i passaggi, il tuo codice finale dovrebbe assomigliare a questo:
import React, { useState, useEffect } from 'react';
import { FaAngleUp } from 'react-icons/fa';
import './index.css';
const ScrollToTop = () => {
const [showTopBtn, setShowTopBtn] = useState(false);
useEffect(() => {
window.addEventListener('scroll', () => {
if (window.scrollY > 400) {
setShowTopBtn(true);
} else {
setShowTopBtn(false);
}
});
}, []);
const goToTop = () => {
window.scrollTo({
top: 0,
behavior: 'smooth',
});
};
return (
<div className="top-to-btm">
{showTopBtn && (
<FaAngleUp className="icon-position icon-style" onClick={goToTop} />
)}
</div>
);
};
export default ScrollToTop;Ho incluso il markup, quindi puoi vedere dove ho aggiunto la funzione onClick().
Il passaggio successivo consiste nell'aggiungere questo componente a qualsiasi pagina del tuo sito Web in cui desideri che funzioni. Se vuoi che funzioni su tutte le pagine della tua applicazione React, aggiungilo semplicemente al tuo file App.js.
Questo viene fatto importando prima il componente (ScrollToTop.js) e quindi aggiungendo il componente da qualche parte all'interno del tuo file App.js:
import ScrollToTop from './ScrollToTop.js';
const App = () => {
return (
<div className="App">
<ScrollToTop />
<div className="section section1"></div>
<div className="section section2"></div>
<div className="section section3"></div>
<div className="section section4"></div>
<div className="section section5"></div>
</div>
);
}
export default App;Come scorrere verso il basso con React
Questa è la funzionalità più semplice da aggiungere poiché tutto ciò che devi fare è scrivere una funzione per gestire la logica e quindi chiamarla quando viene premuto il pulsante. Ecco come apparirà la logica:
const scrollToBottom = () => {
window.scrollTo({
top: document.documentElement.scrollHeight,
behavior: 'smooth',
});
};Semplicemente, quello che stiamo facendo è impostare la posizione scrollTo come altezza dell'intera pagina. Il prossimo passo sarebbe includere il metodo onclick() nel nostro markup per il pulsante.
<div className="link btn" onClick={scrollToBottom}>
Scroll to bottom <MdArrowDropDownCircle />
</div>Come scorrere a una sezione particolare con React
Questo è comunemente usato nelle NavBar su siti Web a pagina singola quando gli utenti desiderano andare a una determinata sezione della pagina Web usando la barra di navigazione. Questo è abbastanza simile a quello che abbiamo fatto.
Spiegherò l'idea e poi scriveremo una funzione riutilizzabile per eliminare la ripetizione non necessaria del codice.
Come implementare la logica
Useremo useRef() per questo, che è un hook integrato di React che accetta un argomento o parametro come valore iniziale e restituisce un riferimento.
Il riferimento ha una proprietà interessante e utile denominata current. L'hook useRef() è simile all'hook JavaScript getElementById().
Il primo passo è installare useRef() e quindi creare un ref per accedere alla parte a cui vogliamo scorrere. useRef() accetta un valore che è null.
const aboutSection = useRef(null);Il prossimo passo sarebbe aggiungere il ref che abbiamo dichiarato alla sezione in cui desideriamo scorrere:
<div className="section section2" ref={aboutSection}>
<h2>About Us</h2>
</div>Una volta completato, passeremo alla logica effettiva responsabile di questa funzionalità. Lo faremo scrivendo una funzione che verrà chiamata ogni volta che un utente preme il Nav-link/pulsante. Quindi il metodo window.scrollTo() scorrerà ora nella posizione specificata.
In questa funzione, utilizzeremo il metodo window.scrollTo() di JavaScript che viene utilizzato per scorrere una pagina Web fino a un determinato insieme di coordinate nel documento.
const scrollDown = () => {
window.scrollTo({
top: aboutSection.current.offsetTop,
behavior: 'smooth',
});
};Vedrai che forniremo la parte superiore (dove vogliamo andare) come aboutSection.current.offsetTop. aboutSection è la sezione che abbiamo appena acquisito usando ref e ref ha una proprietà chiamata current che abbiamo usato per ottenere l'elemento specifico. Infine abbiamo usato offsetTop per ottenere il confine esterno del particolare elemento/sezione su cui vogliamo scorrere.
A questo punto, abbiamo implementato con successo tutta la logica necessaria per aiutarci a scorrere verso un punto specifico della nostra homepage usando React. Successivamente, aggiungeremo il metodo onclick() al pulsante nel nostro markup.
<li className="link" onClick={scrollDown}>
About Us
</li>Come rendere il nostro codice riutilizzabile
Quando sono necessari così tanti Navlink per navigare in aree diverse di una singola pagina web, è naturale voler ripetere la logica per gestire ogni sezione. Questo è l'approccio sbagliato.
Possiamo rendere la logica riutilizzabile in questo modo:
const scrollDown = (ref) => {
window.scrollTo({
top: ref.current.offsetTop,
behavior: 'smooth',
});
};Nel codice sopra, stiamo passando il valore del ref dalla funzione che viene attivata nel pulsante individuale.
Ecco come potrebbe apparire la tua pagina web:
<div className="section section1">
<div className="link btn">
Scroll to bottom <MdArrowDropDownCircle />
</div>
<ul className="nav-links">
<li className="link" onClick={() => scrollDown(aboutSection)}>
About Us
</li>
<li className="link" onClick={() => scrollDown(servcesSection)}>
Services
</li>
<li className="link" onClick={() => scrollDown(contactSection)}>
Contact
</li>
</ul>
</div>
<div className="section section2" ref={aboutSection}>
<h2>About Us</h2>
</div>
<div className="section section3" ref={servcesSection}>
<h2>Services</h2>
</div>
<div className="section section4" ref={contactSection}>
<h2>Contact</h2>
</div>Conclusione
In questo articolo, abbiamo visto come implementare lo scorrimento in alto, in basso e in una posizione specifica con React. Abbiamo usato vari hook React per aiutarci a farlo.
Puoi controllare questo repository per vedere il codice di implementazione completo. Ecco anche il collegamento a un esempio live.