스크롤 또는 점프가없는 HTML 앵커 링크

StackOverflow https://stackoverflow.com/questions/1218034

문제

나는 모두 "의사 체인자"인 고유 한 ID를 가진 다양한 링크를 가지고 있습니다. 나는 그들이 URL 해시 값에 영향을 미치기를 원하며 Click Magic은 모두 일부 mootools 코드에 의해 처리됩니다. 그러나 링크를 클릭하면 스크롤 (또는 한 경우에 맨 위). 어디서나 스크롤하고 싶지는 않지만 URL 업데이트에서 해시 값을 실행하고 해시 값을 얻으려면 JavaScript가 필요합니다.

시뮬레이션 된 샘플 코드 :

<a href="#button1" id="button1">button 1</a>
<a href="#button2" id="button2">button 2</a>
<a href="#" id="reset">Home</a>

따라서 "버튼 1"링크를 클릭하려면 URL이 될 수 있습니다. http://example.com/foo.php#button1

누구든지 이것에 대한 아이디어가 있습니까? JavaScript 리턴 void를 사용하면 스크롤을 죽이지 만 내 JavaScript도 죽일 수 있지만 (아마도 OnClick으로 작업 할 수도 있지만) 더 중요한 것은 URL의 해시 값이 변경되는 것을 방지합니다.

도움이 되었습니까?

해결책

아마 뭔가 누락되었을 지 모르지만 왜 그들에게 다른 ID를주지 않겠습니까?

<a href="#button1" id="button-1">button 1</a>
<a href="#button2" id="button-2">button 2</a>
<a href="#" id="reset">Home</a>

또는 원하는 컨벤션.

다른 팁

앵커 링크의 요점은 페이지를 특정 지점으로 스크롤하는 것입니다. 그래서 당신이 그 일이 일어나기를 원하지 않으면, 당신은 onclick 핸들러 및 거짓을 반환합니다. 속성으로 추가하는 것만으로도 작동해야합니다.

<a href="#button1" id="button1" onclick="return false">button 1</a>

위의 효과의 측면은 URL 자체가 변경되지 않는다는 것입니다. 거짓을 반환하면 이벤트가 취소되므로. 따라서 URL이 실제로 변경되기를 원하기 때문에 window.location.hash 원하는 값에 따라 변수 (즉, 브라우저를 강요하지 않고 변경할 수있는 URL의 유일한 속성). 이벤트 핸들러를 첨부하고 다음과 같은 것을 호출 할 수 있습니다. window.location.hash = this.id Mootools가 어떻게 이벤트를 처리하는지 잘 모르겠지만.

(또한 모든 ID가 고유해야합니다)

아래 코드를 사용하여 스크롤을 피할 수 있습니다.

<a href="javascript:void(0);">linktxt</a>

솔루션을 찾았습니다. 여기서 나는 Href에게 전화하여 오래된 위치를 저장하고 스크롤 후 복원합니다.

<script language="JavaScript" type="text/javascript">
<!--
function keepLocation(oldOffset) {
  if (window.pageYOffset!= null){
    st=oldOffset;
  }
  if (document.body.scrollWidth!= null){
    st=oldOffset;
  }
  setTimeout('window.scrollTo(0,st)',10);
}
//-->
</script>

그리고 페이지의 본문에서

<a href="#tab1" onclick="keepLocation(window.pageYOffset);" >Item</a>

감사합니다 sitepoint

또한, preventDefault

    $(your-selector).click(function (event) {
        event.preventDefault();
        //rest of your code here
    }

더 쉬운 방법은 아마도 그것을 얻는 것입니다. 그건, http://example.com/foo.php?q=#button1 대신에 http://example.com/foo.php#button1

이는 페이지가 표시되는 방식에 영향을 미치지 않으며 (원하지 않는 한) 대부분의 스크립팅 언어에는 이미 데이터를 쉽게 읽을 수있는 도구가 있습니다.

글쎄, 우리는이 답변이 게시 된 지 7 년이 지났으며, 나는 그것을 작동시키는 다른 방법을 찾았습니다. 작동하지 않습니다 <a>S이지만 완벽하게 작동합니다 <div>에스.

<div onclick="window.location.hash = '#NonExistentAnchor';">button 1</div>

Chrome 56, Firefox 52 및 Edge (IE?)에서 잘 작동했습니다. 38. 또 다른 좋은 점은 콘솔 오류 나 경고를 생성하지 않는다는 것입니다.

그것이 내 외에 누군가를 돕기를 바랍니다.

라이센스 : CC-BY-SA ~와 함께 속성
제휴하지 않습니다 StackOverflow
scroll top