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

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

해시를 제거할 수 있습니까?window.locationscroll를 맨 위로 올려놓게 하지 않는 것 말입니까?나는 점프를 일으키지 않고 해시를 수정할 수 있어야 합니다.

나는 이것을 가지고 있습니다.

$('<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

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

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

더미 해시만 넣으시면 스크롤 할 수 있는 매치가 없어서 스크롤이 안 될 것 같습니다.

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

아니면

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

"#"그 자체로"_top"따라서 페이지 상단으로 스크롤합니다.

저는 몇 개의 사이트에서 다음을 사용합니다. NO PAGE JUPS!

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:

Blazeminger와 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 to empty 또는 존재하지 않는 앵커 이름. 항상 페이지를 맨 위로 이동합니다.이를 방지하는 유일한 방법은 윈도우의 스크롤 위치를 잡고 해시 변경 후 해당 위치로 다시 설정하는 것입니다.

또한 페이지를 다시 칠해야 하지만(피할 수 없음) 단일 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입니다.

닻으로 점프하지 않는 해시태그가 있는 URL.

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