useBackToTop

Käyttötarkoitus

Käytä useBackToTop-hookia, kun haluat näyttää ja piilottaa BackToTop-komponentin valmiilla asetuksilla. Hook huomioi myös sivun korkeuden ja näyttää painikkeen vain tarpeeksi pitkillä sivuilla.

Valmiit säännöt painikkeen näyttämiseen

Painike näytetään, kun:

• sivulla on vähintään kahden sivun verran vieritettävää (minPages),
• sivua vieritetään ensin alaspäin ja sitten hieman ylöspäin,
• siirrytään sivun alareunaan (threshold.bottom).

Painike piilotetaan, kun:

• sivua vieritetään alaspäin (threshold.scroll),
• sivu vieritetään takaisin ylös (threshold.top).

Painike jää valikoiden alle, jotta niiden käyttö on sujuvaa (className).

Konfigurointi

Valmiita sääntöjä voi muokata välittämällä hookille seuraavat parametrit. Kaikki parametrit ovat vapaaehtoisia.

const { props } = useBackToTop({
  className: "kds-fixed kds-z-back-to-top",
  enabled: true,
  minPages: 2,
  offset = { bottom: SPACING_4, right: SPACING_4 },
  scrollDelay: 200,
  threshold: { top: 200, bottom: 200, scroll: 200 },
});

Esimerkit

Esimerkkiä on hieman muokattu, jotta se näkyy paremmin editorissa.