Metod för att rulla fönstret till ett element i JavaScript

Metoden scrollIntoView rullar fönstret till det givna elementet. Metoden appliceras på elementet som fönstret ska rullas till. Metodens parameter reglerar var elementet ska hamna: överst i fönstret eller underst.

Låt oss titta på exempel. Rulla fönstret så att elementet hamnar överst i fönstret:

javascriptelem.scrollIntoView(true);

Och nu rullar vi fönstret så att elementet hamnar underst i fönstret:

javascriptelem.scrollIntoView(false);

Man kan också skicka ett objekt med inställningar som parameter. Låt oss rulla fönstret mjukt till elementet:

javascriptelem.scrollIntoView({
  behavior: 'smooth',
});

Objektet med inställningar har också inställningar för sidjustering i förhållande till elementet. Inställningen block sätter den vertikala justeringen, och inställningen inline - den horisontella. De kan ta följande värden: 'start', 'center', 'end', 'nearest'.

Låt oss prova:

javascriptelem.scrollIntoView({
  behavior: 'smooth',
  block: 'start',
  inline: 'end',
});
Задание 1

Givet ett element och en knapp. Vid klick på knappen, rulla sidan till detta element. Testa alla beskrivna funktioner.