JavaScript'te Bir Öğeye Kaydırmak İçin Metot

scrollIntoView metodu, pencereyi belirtilen öğeye kaydırır. Metot, pencereyi kaydırmak istenilen öğeye uygulanır. Metodun parametresi, öğenin nerede konumlanacağını ayarlar: pencerenin üstünde mi altında mı.

Hadi örneklerle görelim. Pencereyi, öğe pencerenin üstünde olacak şekilde kaydıralım:

javascriptelem.scrollIntoView(true);

Şimdi de pencereyi, öğe pencerenin altında olacak şekilde kaydıralım:

javascriptelem.scrollIntoView(false);

Parametre olarak ayarlarla birlikte bir nesne de iletebilirsiniz. Hadi pencereyi öğeye yumuşak bir şekilde kaydıralım:

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

Ayarlar nesnesinin ayrıca sayfanın öğeye göre hizalanması için ayarları vardır. block ayarı dikey hizalamayı belirler, inline ayarı ise yatay hizalamayı belirler. Şu değerleri alabilirler: 'start', 'center', 'end', 'nearest'.

Hadi deneyelim:

javascriptelem.scrollIntoView({
  behavior: 'smooth',
  block: 'start',
  inline: 'end',
});