명명된 앵커(예:이 하나), Chrome은 앵커가 포함된 페이지 부분으로 바로 이동합니다. 여태까지는 그런대로 잘됐다.
하지만 조금 스크롤하면 앵커가 어디에 있는지 잊어버릴 수 있습니다. 명명된 앵커로 어떻게 돌아갈 수 있나요?
페이지 새로고침을 시도했지만 Chrome에서 앵커로 다시 돌아가지 않습니다. 강제 새로고침(Ctrl-F5)도 해봤지만 소용이 없었습니다. 또한 Ctrl-L(주소 표시줄 선택)을 누른 다음 ENTER를 눌러 페이지를 다시 로드해 보았습니다.
해결 방법은 탭을 닫은 다음 전체 URL을 사용하여 새 탭을 다시 여는 것입니다. 이는 사양 문서를 많이 읽는 사람에게는 매우 짜증나는 일입니다! 더 좋은 방법이 있나요?
답변1
간단히 JavaScript를 실행하여 요소를 뷰 상단으로 스크롤할 수 있습니다.
document.getElementById(location.hash.slice(1)).scrollIntoView()
원천:javascript - HTML 페이지를 주어진 앵커로 스크롤하는 방법은 무엇입니까? - 스택 오버플로
편의를 위해 북마크바에 북마크로 추가하거나키보드 단축키 정의.
javascript:document.getElementById(location.hash.slice(1)).scrollIntoView()
URL에 해시가 없으면 (자동) JavaScript 오류가 발생합니다. 대신 페이지 상단으로 스크롤하려면
(document.getElementById(location.hash.slice(1))||document.body).scrollIntoView()
답변2
이 북마크를 사용하세요:
javascript: var h = location.hash ; location.hash = "" ; location.hash = h ; null
설명:
- 설정하면
location.hash페이지가 해당 앵커로 스크롤됩니다. - 특별한 경우로 설정
location.hash하면그 자체작동하지 않습니다. - 그것하다그러나 스크롤을 다음과 같이 설정하면다른 것그런 다음 즉시 원래 값으로 돌아갑니다.
null마지막으로 북마크릿은 /를 최종 값으로 갖undefined거나 (역사적 이유로) 페이지 본문을 최종 값으로 대체해야 합니다.
[다음은 "추가 크레딧"에 대한 것입니다.]
또는 user202729의 답변에 따라 뭔가를 할 수도 있습니다. 그의 대답은 다음에 의해 형성된 앵커에서만 작동합니다 <a id="foo">. 를 사용하는 앵커 <a name="foo">(예: SU/SO/SE에서 사용된 앵커)에서는 작동하지 않습니다 ! 우리는 이를 다음과 같이 잡을 수 있습니다.
javascript: var h = location.hash.slice(1) ; (document.getElementById(h) || document.getElementsByName(h)[0] || document.body).scrollIntoView()
그러나 이러한 접근 방식도 github.com과 같은 사이트에서는 실패합니다 <a class="anchor" href="#foo">. AFAICT, 해당 접근 방식은 비표준이며 맞춤 자바스크립트가 필요합니다. 위의 초기 접근 방식은 세 가지 앵커 스타일 모두에서 작동합니다.
ps 저는 SE에서 나올 수 있는 아이디어의 협업을 좋아합니다. user202729의 답변과 Dean Harding의 답변 읽기주어진 앵커로 HTML 페이지를 스크롤하는 방법은 무엇입니까?실험에 필요한 아이디어를 제공하고 답을 찾기 위해 노력했습니다.
답변3
@Noach의 솔루션을 보완하기 위해 북마크릿을 만드는 방법에 대한 정보를 추가하고 싶었습니다. 북마크릿은 웹페이지를 여는 대신 JavaScript를 실행하는 브라우저 북마크입니다.
불행하게도 구문 제한으로 인해 superuser.com에서는 북마크릿 링크를 생성할 수 없습니다. 따라서 수동으로 추가해야 합니다.
Chromium에 북마크를 추가하려면 북마크바를 마우스 오른쪽 버튼으로 클릭한 다음 '페이지 추가...'를 클릭하세요.
또는 북마크 관리자로 이동한 후 마우스 오른쪽 버튼을 클릭하고 '새 북마크 추가'를 클릭하세요.
"이름" 필드에 re-anchor. 이 텍스트는 북마크바에 표시되는 내용입니다.
"URL" 필드에 붙여넣기javascript: var h = location.hash ; location.hash = "" ; location.hash = h ; null
그런 다음 새로 생성된 북마크를 바 어딘가에 배치하면 필요할 때 클릭할 수 있습니다.