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:

elem.scrollIntoView(true);

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

elem.scrollIntoView(false);

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

elem.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:

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

Bir öğe ve bir buton verilmiştir. Butona tıklandığında sayfayı bu öğeye kaydırın. Anlatılan tüm özellikleri deneyin.