JavaScript의 특정 요소로 스크롤

1. scroll() 함수를 사용하여 JavaScript에서 요소로 스크롤
2. href 속성을 사용하여 JavaScript의 요소로 스크롤
3. scrollIntoView() 함수를 사용하여 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() 함수에서도 사용할 수 있습니다.