HTML에서 특정 위치로 이동하는 방법

HTML에서 지정된 위치로 이동하는 방법: 1. 하단에 컨테이너의 ID를 설정하고 a 태그의 href에 #+id를 사용하여 점프를 수행합니다. 2. 다음과 함께 window.scrollTo 메서드를 사용합니다. 구문 "window.scrollTo ({top,left,behavior})".

이 튜토리얼의 운영 환경: Windows7 시스템, CSS3&&HTML5 버전, Dell G3 컴퓨터.

페이지에 표시되는 정보는 항상 제한되어 있으므로 페이지의 지정된 위치로 이동할 수 있어야 합니다.

순수한 HTML 구현

• 점프 타이밍: db609c4336cb9bfb5b556e968e8cf34a

• 매장된 앵커 포인트: 99b3d03b00c8ec0800c97277285520d8태그의 앵커 포인트5db79b134e9f6b82c0b36e0489ee08ed, ebc7197c3ca13fe8e41a60b0db8878c2

• 로 표시된 앵커 포인트 분석: a 태그를 클릭하면 앵커 포인트로 이동하고 버퍼링 효과가 없으며 경험은 평균이며 "# AnchorName"이 URL에 추가됩니다. 이는 라우팅 구성에 영향을 주기 때문에 SPA 애플리케이션에서는 허용되지 않습니다. 페이지를 새로 고쳐도 아무런 효과가 없습니다.

JavaScript 보조(window.scrollTo 메서드)

• window.scrollTo({ top, left ,behavior}), 이는 각각 숫자, 숫자 및 문자열입니다. 문서 상단과 좌측에서 점프할 거리와 점프 효과 지정(부드럽고, 순간적)

• 점프 타이밍: 이벤트 수신 추가

• 요소에서 문서 상단까지의 거리 가져오기 (offsetTop 속성), offsetTop은 offsetParent 요소의 상단을 기준으로 현재 요소의 거리를 반환하므로 문서 상단으로부터의 거리를 얻으려면 루프를 통해 이를 누적해야 합니다

function heightToTop(ele){
    //ele为指定跳转到该位置的DOM节点
    let bridge = ele;
    let root = document.body;
    let height = 0;
    do{
        height += bridge.offsetTop;
        bridge = bridge.offsetParent;
    }while(bridge !== root)
 
    return height;
}
//按钮点击时
someBtn.addEventListener('click',function(){
    window.scrollTo({
        top:heightToTop(targetEle),
        behavior:'smooth'
    })
})

두 줄 비교 두 번째 방법이 더 낫다는 것은 분명합니다.

추천 학습: html 비디오 튜토리얼

위 내용은 HTML에서 특정 위치로 이동하는 방법의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!