웹 페이지의 특정 스크롤 위치에 대한 하이퍼 링크를 만들 수 있습니까? 예를 들어,에 대한 링크를 만들고 싶습니다. http://www.stackoverflow.com/ 페이지가 100 픽셀 아래로 스크롤됩니다.
답변:
특정 위치로 스크롤하려면 jQuery scrollTo 플러그인 . 당신이 데모 페이지 플러그인을 통해 특정 위치로 스크롤하는 것을 포함하여 다양한 옵션을 사용할 수 있음을 알 수 있습니다. 즉, 대상의 JavaScript를 제어해야하므로 외부 사이트 링크에 적합하지 않을 수 있습니다.
인 페이지의 어딘가에 바닐라 방식 링크는 앵커 포인트 이미 페이지에 있습니다.
다음을 사용하여 만들 수 있습니다. <a>…</a> 꼬리표. "앵커 포인트"(위)에 지정된 링크에는 #h-12.2 결국. 이것은에 해당합니다. <a id="h-12.2">12.2</a> 페이지를 구성하는 HTML에 포함되며 클릭하면 페이지 뷰가이 앵커로 재배치됩니다.
HTML5 이전에는 name 속성이 앵커 태그에서 사용되었지만 더 이상 지원되지 않으며 id 속성은 그 자리에서 사용되어야합니다 ( 참고 ). 이것은 또한 앵커 태그에 대한 요소를 사용할 수 있음을 의미합니다. <a> 요소.
Paul의 대답과 마찬가지로 HTML 문서에서 태그 ID의 첫 번째 항목에 연결할 수도 있습니다. 그러나 정확한 픽셀 수는 아닙니다.
페이지에서 마우스 오른쪽 버튼을 클릭하고 요소 검사를 시도하십시오. 당신은 <a> 태그는 앵커 포인트입니다.
그런 다음 < 처음과 마지막 전 a 그래서 그들은 링크로 나타나지 않을 것입니다. 아래에 미리보기가 표시되면 응답 상자에 글을 쓰면서 실제로 효과를 볼 수 있습니다.
a href="https://superuser.com/questions/382047/linking-to-a-specific-scroll-position-on-a-web-page#question-header">question /a>
과
a href="https://superuser.com/questions/382047/linking-to-a-specific-scroll-position-on-a-web-page#answers">answers /a>
보시다시피, 유일한 차이점은 앵커가 파운드 뒤에 이름을 붙인 바로 그 끝에 있습니다 ( # ) 기호. 이름은 > 링크가 사용자에게 읽는 방법입니다.
이 경우 "질문 헤더"는 "질문"으로 표시되고 답변은 동일하게 발생합니다.
그런 다음 다음 링크로 연결해야합니다. 마이크의 코멘트 . 앵커 포인트가 382094
명확히하기 위해 앵커를 찾아서 # 당신의 링크 후에.
https://superuser.com/questions/382047/linking-to-a-specific-scroll-position-on-a-web-page#question-header
https://superuser.com/questions/382047/linking-to-a-specific-scroll-position-on-a-web-page#answers
https://superuser.com/questions/382047/linking-to-a-specific-scroll-position-on-a-web-page#880079
이것들은 모두 당신을 같은 페이지의 다른 장소로 데려다 줄 것입니다.
당신이 사용할 수있는 Citebite 그 위치에서 id를 사용하지 않아도 웹 페이지의 특정 위치에 링크 할 수 있습니다. 사용하기 쉽습니다. 견적 텍스트 입력란에 웹 페이지로 이동 한 후 표시 할 텍스트의 덩어리를 붙여 넣은 다음 소스 URL 텍스트 필드에 웹 페이지의 링크를 제공하십시오. 그런 다음 Citebite 만들기를 클릭하십시오. 그런 다음 링크가 생성됩니다. 해당 링크가 원하는 링크가됩니다.