클릭시 해당 class 이동 +크기 관련 메서드

.offsetTop 이용 한 방법

offsetTop : 요소의 Y축 위치 값(문서 기준)을 가져옵니다. 

clientTop :  요소의 Y축 위치 값(부모 기준)을 가져옵니다. 

<li class="on" onclick="이름이름('main_content')"><a >HOME</a><div></div></li>

<article class="main_content" >
</article>

function 이름이름(name) {
    var location = document.querySelector("." + name).offsetTop;
    window.scrollTo({top: location, behavior: 'smooth'});
}

//
//사용 예시 = 
function Test(name) {
    var location = document.querySelector("." + name).offsetTop;
    window.scrollTo({top: location, behavior: 'smooth'});
}

크기 및 위치와 관련된 메서드

• clientWidth 속성은 요소의 가로 값(마진/보더 불포함)을 가져옵니다.
• clientHeight 속성은 요소의 세로 값(마진/보더 불포함)을 가져옵니다.
• clientTop 속성은 요소의 Y축 위치 값(부모 기준)을 가져옵니다.
• clientLeft 속성은 요소의 X축 위치 값(부모 기준)을 가져옵니다.
• offsetWidth 속성은 요소의 가로 값(보더/패딩 포함)을 가져옵니다.
• offsetHeight 속성은 요소의 세로 값(보더/패딩 포함)을 가져옵니다.
• offsetTop 속성은 요소의 Y축 위치 값(문서 기준)을 가져옵니다.
• offsetLeft 속성은 요소의 X축 위치 값(문서 기준)을 가져옵니다.
• offsetParent 속성은 부모 요소를 기준으로 위치 정보를 가져옵니다.
• getBoundingClientRect() 메서드는 요소의 크기 및 위치 정보를 가져옵니다.
• getClientRect() 메서드는 요소의 크기 및 위치 정보를 가져옵니다.

크기와 관련된 메서드 - jQuery

• • width() 메서드는 선택한 요소의 가로 값(패딩/보더/마진 불포함)을 가져오거나 설정합니다.
  • innerWidth() 메서드는 선택한 요소의 가로 값(패딩 포함)을 가져오거나 설정합니다.
  • outerWidth() 메서드는 선택한 요소의 가로 값(패딩/보더 포함)을 가져오거나 설정합니다.
  • outerWidth(true) 메서드는 선택한 요소의 가로 값(패딩/보더/마진 포함)을 가져오거나 설정합니다.
  • height() 메서드는 선택한 요소의 세로 값(패딩/보더/마진 불포함)을 가져오거나 설정합니다.
  • innerHeight() 메서드는 선택한 요소의 세로 값(패딩 포함)을 가져오거나 설정합니다.
  • outerHeight() 메서드는 선택한 요소의 세로 값(패딩/보더 포함)을 가져오거나 설정합니다.
  • outerHeight(true) 메서드는 선택한 요소의 세로 값(패딩/보더/마진 포함)을 가져오거나 설정합니다.

 

 

참고 링크

https://velog.io/@migdracios/%EB%B2%84%ED%8A%BC-%EC%8A%A4%ED%81%AC%EB%A1%A4-%EC%9D%B4%EB%8F%99-JAVASCRIPT

[JS] 버튼 스크롤 이동

https://webstoryboy.co.kr/1738

offsetTop 속성은 요소의 Y축 위치 값을 가져옵니다.

https://okayoon.tistory.com/entry/%ED%81%B4%EB%A6%AD%ED%95%98%EC%97%AC-%EC%8A%A4%ED%81%AC%EB%A1%A4-%EC%9D%B4%EB%8F%99%ED%95%98%EA%B8%B0-scrollintoview

버튼 클릭하여 해당영역으로 스크롤 이동하기 scrollintoview();