> 웹 프론트엔드 > HTML 튜토리얼 > HTML에서 페이지 내 점프를 구현하는 방법

HTML에서 페이지 내 점프를 구현하는 방법

coldplay.xixi
풀어 주다: 2023-01-05 16:12:01
원래의
12679명이 탐색했습니다.

HTML에서 페이지 내 이동을 구현하는 방법: 1. 기본 링크 앵커를 사용합니다. 2. href는 특정 ID를 가리키며, 코드는 [Hyperlink

HTML에서 페이지 내 점프를 구현하는 방법

이 튜토리얼의 운영 환경: windows7 시스템, html5 버전, DELL G3 컴퓨터.

HTML에서 페이지 내 이동을 구현하는 방법:

1. 기본 링크 앵커를 사용합니다.

가장 쉬운 방법은 하이퍼링크를 추가하고 하이퍼링크의 href 속성 값을 "#top"으로 설정하는 것입니다. . 상단으로 돌아가는 기능을 구현할 수 있습니다.

<a href="#top">
超链接
</a>
로그인 후 복사

2. href는 특정 ID를 가리킵니다

페이지의 기존 태그에서 "맨 위로 돌아가기" 연결의 href를 사용하여 상단에 id 속성이 있는 태그를 가리켜 다음 기능을 수행합니다. 정상으로 돌아갑니다. 이 방법을 사용하려면 페이지 상단에 있는 태그에 id 속성이 있는 태그가 상단을 가리켜야 합니다. 맞춤형 추가도 가능합니다.

<body id="bh-page">
...
<a href="#bh-page">
     超链接
</a>   
</body>
로그인 후 복사

3. 사용자 정의 링크 앵커 사용

이 방법은 앵커를 정의한 다음 하이퍼링크를 사용하여 앵커를 가리켜야 합니다.

이 방법은 추가 링크 앵커를 정의해야 한다는 점을 제외하면 실제로 두 번째 방법과 유사합니다.

<a name="gohere"></a>//定义一个超链接,跳转到这个,可以没有文字
.....
<a href="#gohere">
超链接
</a>
로그인 후 복사

관련 학습 권장사항: html 비디오 튜토리얼

위 내용은 HTML에서 페이지 내 점프를 구현하는 방법의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!

관련 라벨:
본 웹사이트의 성명
본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.
인기 튜토리얼
더>
최신 다운로드
더>
웹 효과
웹사이트 소스 코드
웹사이트 자료
프론트엔드 템플릿