468. (javaScript) [간단 소스] 자바스크립트 scrollIntoView 사용해 특정 태그 위치로 스크롤 이동 수행

---

[개발 환경 설정]

​

개발 툴 : Edit++

개발 언어 : JavaScript

 

---

[소스 코드]

​

-----------------------------------------------------------------------------------------
[사전 설명 및 설정 사항]
-----------------------------------------------------------------------------------------

- 개발 환경 : Web


- 개발 기술 : JavaScript (자바스크립트) / scrollIntoView


- 사전) scrollIntoView 간략 설명 : 

  >> element.scrollIntoView() 는 브라우저에서 특정 DOM 요소가 화면에 보이도록 자동으로 스크롤시키는 메서드입니다

  >> element.scrollIntoView() 는 스크롤 애니메이션, 특정 위치 이동, 버튼 클릭 시 해당 섹션으로 이동하는 UI 등에 자주 사용됩니다

-----------------------------------------------------------------------------------------





-----------------------------------------------------------------------------------------
[소스 코드]
-----------------------------------------------------------------------------------------

// --------------------------------------------------
// Body 데이터 예시
// --------------------------------------------------
<div id= "goToOtaSection" class="mb-2 fw-bold"><p style="color: rgb(12, 12, 175);">AWS OTA 펌웨어 업데이트 Job 생성</p></div>

<h1 id="otaSection" class="h3 mb-1" style="background-color: bisque;">【 AWS 펌웨어 업데이트 Job 생성 】</h1>



// --------------------------------------------------
// 자바스크립트 코드 예시
// --------------------------------------------------
const goToOtaSection = document.getElementById('goToOtaSection');

goToOtaSection.addEventListener('click', async() => {
  console.log("");
  console.log("=========================================");
  console.log("[goToOtaSection] : [start]");
  console.log("=========================================");
  console.log("");

  try {
    
    const el = document.getElementById('otaSection');
    if (!el) return;
    el.scrollIntoView({ behavior: 'smooth', block: 'start' });

  }
  catch (exception) {
    console.error("");
    console.error("=========================================");
    console.error("[goToOtaSection] : [Exception] : 예외 상황 발생");
    console.error("-----------------------------------------");
    console.error(exception.name);
    console.error("-----------------------------------------");
    console.error(exception.message);
    console.error("=========================================");
    console.error("");1
  }
});

-----------------------------------------------------------------------------------------





-----------------------------------------------------------------------------------------
[참고 사이트]
-----------------------------------------------------------------------------------------

[간단 소스] 자바스크립트 Body Scroll 바디 스크롤 막기 및 스크롤 재적용 코드 - lockBodyScroll

https://kkh0977.tistory.com/8487

https://blog.naver.com/kkh0977/224107568596


[scrollTop 사용해 특정 객체 top , bottom 위치 스크롤 이동 실시]

https://blog.naver.com/kkh0977/222503090746?trackingCode=blog_bloghome_searchlist


[특정 객체 크기, 위치 확인-offsetWidth, clientWidth, scrollWidth, getBoundingClientRect]

https://blog.naver.com/kkh0977/222414895064?trackingCode=blog_bloghome_searchlist


[터치 이벤트 등록 및 좌표 확인 실시 - touchstart , touchmove , touchend]

https://blog.naver.com/kkh0977/222403028401?trackingCode=blog_bloghome_searchlist

-----------------------------------------------------------------------------------------

 

---

[참고 사이트]

​

https://kkh0977.tistory.com/8487

467. (javaScript) [간단 소스] 자바스크립트 Body Scroll 바디 스크롤 막기 및 스크롤 재적용 코드 - lockBo

---