JavaScript의 특정 요소로 스크롤

JavaScript를 사용하여 다른 브라우저에서 브라우저 창의 표시 영역에 지정된 요소를 가져오는 방법에 대해 설명합니다.

이 작업을 수행하는 방법은 다음과 같습니다.

scroll() 함수를 사용하여 JavaScript에서 요소로 스크롤

요소 인터페이스의 scroll() 함수는 주어진 요소 내의 특정 좌표 세트로 스크롤합니다. 이것은 Chrome 및 Firefox에 적합하며 나머지에는 적합하지 않습니다.

window.scroll(0, findPos(document.getElementById('myDiv')));

getElementById() 메소드를 사용하여 필요한 요소를 얻습니다. 이를 scroll() 함수에 전달하여 필요한 요소로 스크롤합니다.

href 속성을 사용하여 JavaScript의 요소로 스크롤

여기에서 href 값을 JavaScript에서 웹페이지의 앵커를 가리키도록 설정할 수 있습니다.

location.href = '#';
location.href = '#myDiv';

여기서 #myDiv는 필수 <div> 태그의 ID입니다.

scrollIntoView() 함수를 사용하여 JavaScript의 요소로 스크롤

scrollIntoView() 함수는 제공된 요소를 브라우저 창의 보기 가능 영역으로 이동합니다. IE, Safari, Edge 사용자에게 가장 적합합니다.

예를 들어,

document.querySelector('#myDiv').scrollIntoView({behavior: 'smooth'});

behavior 속성은 스크롤의 모양을 설명합니다. 이 예에서는 smooth로 설정되어 있습니다. 이 속성은 scroll() 함수에서도 사용할 수 있습니다.