페이지를 스크롤하지 않고 위치 해시를 제거해야합니까?

페이지를 스크롤하지 않고 위치 해시를 제거해야합니까?

---

window.location페이지를 맨 위로 점프 스크롤하지 않고 제거 할 수 있습니까? 점프를 일으키지 않고 해시를해야합니다.

나는 요구 가지고있다 :

$('<a href="#123">').text('link').click(function(e) {
  e.preventDefault();
  window.location.hash = this.hash;
}).appendTo('body');

$('<a href="#">').text('unlink').click(function(e) {
  e.preventDefault();
  window.location.hash = '';
}).appendTo('body');

여기에서 라이브 예제를 참조하십시오 : http://jsbin.com/asobi

사용자가 ' 링크 '를 클릭하면 페이지 점프없이 해시 태그가 수정 제대로 작동합니다.

그러나 사용자가 ' unlink '를 클릭 하면 태그가 제거되고 페이지가 맨 위로 스크롤됩니다. 이 부작용없이 해시를 제거해야합니다.

---

더미 해시를 의심면 스크롤하지 않을 것이 믿습니다.

<a href="#A4J2S9F7">No jumping</a>

또는

<a href="#_">No jumping</a>

"#"그 자체로 "_top"페이지 상단으로 스크롤 될 수 있습니다.

---

몇 개의 사이트에서 다음을 사용합니다. 페이지 점프가 없습니다!

HTML5 브라우저를위한 깔끔한 주소 표시 줄과 이전 브라우저의 경우 #.

$('#logo a').click(function(e){
    window.location.hash = ''; // for older browsers, leaves a # behind
    history.pushState('', document.title, window.location.pathname); // nice and clean
    e.preventDefault(); // no page reload
});

---

window.location의 해시 속성은 몇 가지면에서 어리 석습니다. 이것은 그들 중 하나입니다. 다른 하나는 get 및 set 값이 있습니다.

window.location.hash = "hello";  // url now reads *.com#hello
alert(window.location.hash);   // shows "#hello", which is NOT what I set.
window.location.hash = window.location.hash; // url now reads *.com##hello

해시 속성을 ''로 설정하면 해시 표시도 제거됩니다. 그것이 페이지를 리디렉션하는 것입니다. URL의 해시 부분 값을 ''로 설정하고 해시 표시를 그대로두고 새로 고치지면 다음을 작성하십시오.

window.location.href = window.location.href.replace(/#.*$/, '#');

페이지를 새로 고치지 않고 한 번만 표시를 완전히 제거하는 방법은 없습니다.

2012 업데이트 :

Blazemonger와 thinkdj가 지적했듯이 기술이 향상되었습니다. 일부 브라우저에서는 해당 태그를 지울 수 있습니다. 둘 다 지원 비용 다음과 같이 시도하십시오.

if ( window.history && window.history.pushState ) { 
    window.history.pushState('', '', window.location.pathname) 
} else { 
    window.location.href = window.location.href.replace(/#.*$/, '#'); 
}

---

이것은 오래된 게시물이지만 내 솔루션을 공유하고 싶었습니다 JS에 의해 처리되는 내 프로젝트의 모든 링크는 href = "#_ js"속성 (또는 해당하는 목적으로 만 사용하려는 이름)이 페이지 초기화에 있습니다. 나는한다 :

$('body').on('click.a[href="#_js"]', function() {
    return false;
});

그게 트릭을 할거야

---

window.location.hash를 비어 있거나 존재하지 않는 앵커 이름으로 설정하면 항상 페이지가 맨 위로 이동합니다. 이를 방지하는 유일한 방법은 창의 스크롤 위치를 잡고 해시 변경 후 다시 해당 위치로 설정하는 것입니다.

이 또한 페이지를 다시 칠할 것입니다 (피할 수 없습니다). 단일 js 프로세스에서 실행되기 때문에 (이론적으로) 위로 / 아래로 점프하지 않습니다.

$('<a href="#123">').text('link').click(function(e) {
    e.preventDefault();
    window.location.hash = this.hash;
}).appendTo('body');

$('<a href="#">').text('unlink').click(function(e) {
    e.preventDefault();
    var pos = $(window).scrollTop(); // get scroll position
    window.location.hash = '';
    $(window).scrollTop(pos); // set scroll position back
}).appendTo('body');

도움이 되셨기를 바랍니다.

---

이것이 원하는 결과를 생성하는지 확실하지 않습니다.

$('<a href="#">').text('unlink').click(function(e) {
    e.preventDefault();
    var st = parseInt($(window).scrollTop())
    window.location.hash = '';
    $('html,body').css( { scrollTop: st });  
});

기본적으로 가동되는 것을 저장하고 빈 해시를 할당 한 후 복원합니다.

---

return false;이벤트 핸들러에서 시도해 보셨습니까 ? jQuery는 이와 유사하지만 AFAIK가 e.preventDefault.

---

도움이 되었기를 바랍니다

HTML

<div class="tabs">
  <ul>
    <li><a href="#content1">Tab 1</a></li>
    <li><a href="#content2">Tab 2</a></li>
    <li><a href="#content3">Tab 3</a></li>
  </ul>
</div>
<div class="content content1">
    <p>1. Content goes here</p>
</div>
<div class="content content2">
    <p>2. Content goes here</p>
</div>
<div class="content content3">
    <p>3. Content goes here</p>
</div>

js

function tabs(){
  $(".content").hide();

  if (location.hash !== "") {
    $('.tabs ul li:has(a[href="' + location.hash + '"])').addClass("active");
    var hash = window.location.hash.substr(1);
    var contentClass = "." + hash;
    $(contentClass).fadeIn();
  } else {
    $(".tabs ul li").first().addClass("active");
    $('.tabs').next().css("display", "block");
  }
}
tabs();

$(".tabs ul li").click(function(e) {
  $(".tabs ul li").removeAttr("class");
  $(this).addClass("active");
  $(".content").hide();
  var contentClass = "." + $(this).find("a").attr("href").substr(1);
  $(contentClass).fadeIn();
  window.location.hash = $(this).find("a").attr("href");
  e.preventDefault();
  return false;
});

해시가없는 URL입니다.
http://output.jsbin.com/tojeja

앵커로 이동하지 않는 해시 태그가있는 URL입니다.
http://output.jsbin.com/tojeja#content1

참고 URL : https://stackoverflow.com/questions/2295845/how-can-i-remove-the-location-hash-without-causing-the-page-to-scroll