자바 스크립트를 사용하여 앵커 점프

매우 자주 발견되는 질문이 있습니다. 문제는 명백한 해결책을 찾을 수 없다는 것입니다.

앵커와 관련하여 두 가지 문제가 있습니다.

주요 목표는 앵커를 사용하여 페이지에서 점프하는 동안 해시없이 깔끔한 URL을 얻는 것입니다.

앵커의 구조는 다음과 같습니다.

<ul>
    <li><a href="#one">One</a></li>
    <li><a href="#two">Two</a></li>
    <li><a href="#three">Three</a></li>
</ul>

<div class="wrap">
    <a name="one">text 1</a>
    <a name="two">text 2</a>
    <a name="three" class="box">text 3</a>
</div>

링크 중 하나를 클릭하면 URL이 자동으로

www.domain.com/page#1

결국 이것은 다음과 같아야합니다.

www.domain.com/page

여태까지는 그런대로 잘됐다. 두 번째는 인터넷에서 해당 문제를 검색 할 때 javascript해결책으로 찾을 수 있습니다.

이 기능을 찾았습니다.

function jumpto(anchor){
    window.location.href = "#"+anchor;
}

그리고 그 기능을 다음과 같이 호출합니다.

<a onclick="jumpto('one');">One</a>

이전과 같은 것이 무엇입니까? URL에 해시를 추가합니다. 나는 또한 추가했다

<a onclick="jumpto('one'); return false;">

성공없이. 따라서이 문제를 해결하는 방법을 알려주는 사람이 있다면 정말 감사하겠습니다.

고마워

대상 요소의 좌표를 가져 와서 스크롤 위치를 설정할 수 있습니다. 그러나 이것은 너무 복잡합니다.

이를 수행하는 게으른 방법은 다음과 같습니다.

function jump(h){
    var url = location.href;               //Save down the URL without hash.
    location.href = "#"+h;                 //Go to the target element.
    history.replaceState(null,null,url);   //Don't like hashes. Changing it back.
}

이것은 replaceStateURL을 조작하는 데 사용 됩니다. IE 지원을 원한다면 복잡한 방법으로 수행해야합니다 .

function jump(h){
    var top = document.getElementById(h).offsetTop; //Getting Y of target element
    window.scrollTo(0, top);                        //Go there directly or some transition
}​

데모 : http://jsfiddle.net/DerekL/rEpPA/
전환이있는 또 하나 : http://jsfiddle.net/DerekL/x3edvp4t/

당신은 또한 사용할 수 있습니다 .scrollIntoView:

document.getElementById(h).scrollIntoView();   //Even IE6 supports this

_{(잘 거짓말 했어. 전혀 복잡하지 않아.)}

훨씬 간단한 해결책이라고 생각합니다.

window.location = (""+window.location).replace(/#[A-Za-z0-9_]*$/,'')+"#myAnchor"

이 방법은 웹 사이트를 다시로드 하지 않으며 화면 판독기에 필요한 앵커에 초점 을 설정합니다 .

댓글에 대한 담당자가 충분하지 않습니다.

앵커가 설정 name했지만 id설정하지 않은 경우 (권장하지 않지만 야생에서 발생하는 경우) 선택한 답변의 getElementById () 기반 메소드가 작동 하지 않습니다.

문서 마크 업 (예 : 웹 확장)을 제어 할 수없는 경우 염두에 두어야 할 사항입니다.

location선택한 답변 의 기반 방법을 다음과 location.replace같이 단순화 할 수도 있습니다 .

function jump(hash) { location.replace("#" + hash) }

당신이 할 때 때문에

window.location.href = "#"+anchor;

새 페이지를로드하면 다음을 수행 할 수 있습니다.

<a href="#" onclick="jumpTo('one');">One</a>
<a href="#" id="one"></a>

<script>

    function getPosition(element){
        var e = document.getElementById(element);
        var left = 0;
        var top = 0;

        do{
            left += e.offsetLeft;
            top += e.offsetTop;
        }while(e = e.offsetParent);

        return [left, top];
    }

    function jumpTo(id){    
        window.scrollTo(getPosition(id));
    }

</script>

클릭하면 디스플레이 대화 상자가 열리고 검색하려는 내용을 쓸 수 있으며 페이지의 해당 위치로 이동하라는 프롬프트 버튼이 있습니다. 자바 스크립트를 사용하여 헤더에 응답합니다.

.html 파일에서 나는 가지고있다 :

<button onclick="myFunction()">Load Prompt</button>
<span id="test100"><h4>Hello</h4></span>

.js 파일에서 나는

function myFunction() {
    var input = prompt("list or new or quit");

    while(input !== "quit") {
        if(input ==="test100") {
            window.location.hash = 'test100';
            return;
// else if(input.indexOf("test100") >= 0) {
//   window.location.hash = 'test100';
//   return;
// }
        }
    }
}

내가 쓸 때 test100을 프롬프트로, 그것은 내가 html 파일에 스팬 ID = "test100을"이있는 위치로 이동합니다.

Chrome을 사용합니다.

참고 :이 아이디어는 같은 페이지에서

<a href="#test100">Test link</a>

클릭하면 앵커로 전송됩니다. 경험에서 여러 번 작동하려면 페이지를 다시로드해야합니다.

stackoverflow (그리고 아마도 stackexchange) 사람들에게 신용은 내가 모든 비트와 조각을 모은 방법을 기억할 수 없습니다. ☺