하이퍼 링크 정보 :

앵커 태그의 주요 사용은 – <a></a>– 같다 하이퍼 링크 . 그것은 기본적으로 그들이 당신을 어딘가로 데려가는 것을 의미합니다. 하이퍼 링크 href는 위치를 지정하기 때문에 속성이 필요합니다 .

해시시:

#하이퍼 링크 내의 해시 는 창을 스크롤 할 html 요소 ID를 지정합니다.

href="#some-id"현재 페이지에서와 같은 요소로 스크롤합니다 <div id="some-id">.

href="https://stackoverflow.com//site.com/#some-id"site.com해당 페이지의 ID 로 이동하여 스크롤합니다.

맨위로 스크롤:

href="#"ID 이름을 지정하지 않지만 해당 위치가 있습니다 (페이지 상단). 로 앵커를 클릭하면 href="#"스크롤 위치가 맨 위로 이동합니다.

이 데모를보십시오.

이것은 w3 문서 에 따라 예상되는 동작 입니다.

하이퍼 링크 자리 표시 자 :

하이퍼 링크 자리 표시자가 적합한 예는 템플릿 미리보기입니다. 템플릿에 대한 단일 페이지 데모 <a href="#">에서 앵커 태그가 하이퍼 링크이지만 어디로도 가지 않도록 자주 보았습니다 . href속성을 비워 두지 않겠습니까? 빈 href속성은 실제로 현재 페이지에 대한 하이퍼 링크입니다. 즉, 페이지를 새로 고칩니다. 앞에서 설명한 것처럼 href="#"하이퍼 링크이기도하며 스크롤이 발생합니다. 따라서 하이퍼 링크 자리 표시 자에 대한 가장 좋은 해결책은 실제로 href="#!"페이지의 요소가 id="!"누구에게 있지 않기를 바라는 것입니다.

앵커 태그 정보 :

궁금한 또 다른 질문은 “href 속성을 해제하지 않는 이유는 무엇입니까?”입니다. 내가 들었던 일반적인 대답은 그 href속성이 필요하다는 것이므로 앵커에 “있어야한다”. 이것은 거짓입니다! 이 href속성은 앵커가 실제로 하이퍼 링크 인 경우에만 필요합니다! w3에서 이것을 읽으십시오. 그렇다면 자리 표시 자에게만 사용하지 않는 이유는 무엇입니까? 브라우저는 요소의 기본 스타일을 렌더링하고 href 속성이없는 앵커 태그의 기본 스타일을 변경합니다. 대신 일반 텍스트로 간주됩니다. 요소에 대한 브라우저의 동작도 변경됩니다. href 속성이없는 앵커에 마우스를 올리면 상태 표시 줄 (화면 하단)이 표시되지 않습니다. 앵커에 자리 표시 자 href 값을 사용하여 하이퍼 링크로 취급되도록하는 것이 가장 좋습니다.

스타일과 동작의 차이를 보여주는 이 데모를보십시오 .

답변

<a href="#bottomOfPage">Click to go to the bottom of the page</a>
blah blah
blah blah
...
<a id="bottomOfPage"></a>

<ul id="menu">
   <li><a href="#">Menu Item 1</a></li>
   <li><a href="#">Menu Item 2</a></li>
   <li><a href="#">Menu Item 3</a></li>
   <li><a href="#">Menu Item 4</a></li>
</ul>

<a href="javascript:void(0)">Goes Nowhere</a>