문서를 뛰어 넘지 않고 window.location.hash를 어떻게 업데이트합니까?

문서를 뛰어 넘지 않고 window.location.hash를 어떻게 업데이트합니까?

---

웹 사이트에 슬라이딩 패널이 설치되어 있습니다.

애니메이션이 끝나면 해시를 이렇게 설정했습니다.

function() {
   window.location.hash = id;
}

(이것은 콜백이며 id는 이전에 할당됩니다).

이는 사용자가 패널을 책갈피에 추가하고 JavaScript 이외의 버전에서도 작동하도록하는 데 효과적입니다.

그러나 해시를 업데이트하면 브라우저가 해당 위치로 이동합니다. 나는 이것이 예상되는 행동이라고 생각한다.

내 질문은 : 어떻게 이것을 막을 수 있습니까? 즉, 창 해시를 어떻게 변경할 수 있지만 해시 가있는 경우 브라우저가 요소로 스크롤 되지 않습니까? 어떤 종류의 event.preventDefault()것?

jQuery 1.4와 scrollTo 플러그인을 사용하고 있습니다 .

많은 감사합니다!

최신 정보

다음은 패널을 변경하는 코드입니다.

$('#something a').click(function(event) {
    event.preventDefault();
    var link = $(this);
    var id = link[0].hash;

    $('#slider').scrollTo(id, 800, {
        onAfter: function() {

            link.parents('li').siblings().removeClass('active');
            link.parent().addClass('active');
            window.location.hash = id;

            }
    });
});

---

최신 브라우저에서 히스토리 API를 사용하여 기존 브라우저에서 폴백하는 해결 방법이 있습니다.

if(history.pushState) {
    history.pushState(null, null, '#myhash');
}
else {
    location.hash = '#myhash';
}

신용은 Lea Verou 로갑니다

---

문제는 window.location.hash 를 요소의 ID 속성 으로 설정하는 것입니다. "preventDefault ()"여부에 관계없이 브라우저가 해당 요소로 이동하는 것이 예상되는 동작입니다.

이 문제를 해결하는 한 가지 방법은 해시 앞에 임의의 값을 붙이는 것입니다.

window.location.hash = 'panel-' + id.replace('#', '');

그런 다음 페이지로드시 접두사가 붙은 해시를 확인하기 만하면됩니다. 추가 보너스로, 이제 해시 값을 제어하므로 부드럽게 스크롤 할 수도 있습니다 ...

$(function(){
    var h = window.location.hash.replace('panel-', '');
    if (h) {
        $('#slider').scrollTo(h, 800);
    }
});

초기 페이지로드뿐만 아니라 항상 작동 해야하는 경우 함수를 사용하여 해시 값의 변경 사항을 모니터링하고 즉시 올바른 요소로 이동할 수 있습니다.

var foundHash;
setInterval(function() {
    var h = window.location.hash.replace('panel-', '');
    if (h && h !== foundHash) {
        $('#slider').scrollTo(h, 800);
        foundHash = h;
    }
}, 100);

---

Cheap and nasty solution.. Use the ugly #! style.

To set it:

window.location.hash = '#!' + id;

To read it:

id = window.location.hash.replace(/^#!/, '');

Since it doesn't match and anchor or id in the page, it won't jump.

---

Why dont you get the current scroll position, put it in a variable then assign the hash and put the page scroll back to where it was:

var yScroll=document.body.scrollTop;
window.location.hash = id;
document.body.scrollTop=yScroll;

this should work

---

I used a combination of Attila Fulop (Lea Verou) solution for modern browsers and Gavin Brock solution for old browsers as follows:

if (history.pushState) {
    // IE10, Firefox, Chrome, etc.
    window.history.pushState(null, null, '#' + id);
} else {
    // IE9, IE8, etc
    window.location.hash = '#!' + id;
}

As observed by Gavin Brock, to capture the id back you will have to treat the string (which in this case can have or not the "!") as follows:

id = window.location.hash.replace(/^#!?/, '');

Before that, I tried a solution similar to the one proposed by user706270, but it did not work well with Internet Explorer: as its Javascript engine is not very fast, you can notice the scroll increase and decrease, which produces a nasty visual effect.

---

This solution worked for me.

The problem with setting location.hash is that the page will jump to that id if it's found on the page.

The problem with window.history.pushState is that it adds an entry to the history for each tab the user clicks. Then when the user clicks the back button, they go to the previous tab. (this may or may not be what you want. it was not what I wanted).

For me, replaceState was the better option in that it only replaces the current history, so when the user clicks the back button, they go to the previous page.

$('#tab-selector').tabs({
  activate: function(e, ui) {
    window.history.replaceState(null, null, ui.newPanel.selector);
  }
});

Check out the History API docs on MDN.

---

I'm not sure if you can alter the original element but how about switch from using the id attr to something else like data-id? Then just read the value of data-id for your hash value and it won't jump.

---

This solution worked for me

// store the currently selected tab in the hash value
    if(history.pushState) {
        window.history.pushState(null, null, '#' + id);
    }
    else {
        window.location.hash = id;
    }

// on load of the page: switch to the currently selected tab
var hash = window.location.hash;
$('#myTab a[href="' + hash + '"]').tab('show');

And my full js code is

$('#myTab a').click(function(e) {
  e.preventDefault();
  $(this).tab('show');
});

// store the currently selected tab in the hash value
$("ul.nav-tabs > li > a").on("shown.bs.tab", function(e) {
  var id = $(e.target).attr("href").substr(1);
    if(history.pushState) {
        window.history.pushState(null, null, '#' + id);
    }
    else {
        window.location.hash = id;
    }
   // window.location.hash = '#!' + id;
});

// on load of the page: switch to the currently selected tab
var hash = window.location.hash;
// console.log(hash);
$('#myTab a[href="' + hash + '"]').tab('show');

---

When using laravel framework, I had some issues with using a route->back() function since it erased my hash. In order to keep my hash, I created a simple function:

$(function() {   
    if (localStorage.getItem("hash")    ){
     location.hash = localStorage.getItem("hash");
    }
}); 

and I set it in my other JS function like this:

localStorage.setItem("hash", myvalue);

You can name your local storage values any way you like; mine named hash.

Therefore, if the hash is set on PAGE1 and then you navigate to PAGE2; the hash will be recreated on PAGE1 when you click Back on PAGE2.

참고URL : https://stackoverflow.com/questions/3870057/how-can-i-update-window-location-hash-without-jumping-the-document