현재 페이지의 특정 부분을 클릭한 후 지정된 div로 이동하도록 js를 구현하는 방법은 무엇입니까?

웹사이트 구축 과정에서 이러한 기능을 구현해야 하는 경우가 있습니다. 현재 페이지에서 특정 위치를 마우스로 클릭하면 현재 페이지의 지정된 다른 위치로 바로 이동됩니다. 사실 이 기능은 시니어 프로그래머들에게는 확실히 어렵지 않지만, 초보자들에게는 주로 어디서부터 시작해야 할지 모르기 때문에 어렵습니다. 따라서 이 기사에서는 js가 페이지로 이동하여 div 위치를 지정하는 두 가지 방법을 소개합니다.

1. html 앵커 포인트를 통한 구현:
점프하려는 위치가 html 앵커 포인트인 경우, 즉 A 태그 하이퍼링크를 클릭하여 점프하는 경우 A 태그의 href 속성을 직접 가리킬 수 있습니다. 점프 사양 해당 위치의 div, 코드 예는 다음과 같습니다.

<a href="#abc">点击跳转</a>
<div id="abc">将要跳转到这里</div>

참고: 위의 A 링크를 클릭하면 같은 페이지에서 id="abc"인 div로 스크롤됩니다. 지정된 위치에 있는 div가 고유한 경우 A 태그는 이 ID를 직접 가리킵니다. ID 앞에 # 기호를 추가하는 것을 잊지 마세요.

2. 버튼 버튼을 클릭하면:
점프하려는 위치가 버튼 버튼인 경우 해당 버튼은 href를 추가할 수 없으므로 이를 구현하려면 js 점프 코드를 사용해야 합니다.

<script>
    function onTopClick() {
         window.location.hash = "#abc";
       }
    </script>
    <input  type="button" name="Submit" value="提交"  onclick="javascript:onTopClick();" />
    <div id="abc">js跳转到页面指定div位置</div>

참고: 위에서 언급한 것처럼 제출 버튼을 클릭하면 스크롤되어 같은 페이지에서 id="abc"인 div로 이동합니다. 이 js 클릭 점프 페이지 코드의 원리는 다음과 같습니다. 페이지의 각 요소에 고유 ID가 할당되고, 제출 버튼을 클릭하면 js 클릭 이벤트가 트리거되고, js는 ID인 window.location.hash를 통해 해당 요소로 스크롤하고 점프합니다. = "#abc"는 현재 페이지 id="abc"에 위치한 div를 의미합니다.

위의 내용은 div를 사용하여 로컬 점프 페이지를 구현하는 두 가지 간단한 방법입니다. 이 기사의 소개를 읽으면 초보자라도 관련 지식을 쉽게 익힐 수 있다고 생각합니다.

위 내용은 현재 페이지의 특정 부분을 클릭한 후 지정된 div로 이동하도록 js를 구현하는 방법은 무엇입니까?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!