JavaScript를 트리거하는 링크를 클릭하면 웹 페이지가 맨 위로 스크롤되지 않도록 하려면 어떻게 해야 합니까?

JavaScript를 트리거하는 링크를 클릭하면 웹 페이지가 맨 위로 스크롤되지 않도록 하려면 어떻게 해야 합니까?

다음과 같은 jQuery 또는 JavaScript 이벤트와 유선 연결된 링크가 있는 경우:

<a href="#">My Link</a>

페이지가 상단으로 스크롤되는 것을 방지하려면 어떻게 해야 합니까?앵커에서 href 속성을 제거하면 페이지가 상단으로 스크롤되지 않지만 링크는 클릭 가능하지 않은 것으로 보입니다.

클릭 이벤트에 대한 기본 작업(즉, 링크 대상으로 이동)이 발생하지 않도록 해야 합니다.

이렇게 하는 방법은 두 가지가 있습니다.

1:event.preventDefault()

더 .preventDefault()처리기에 전달된 이벤트 개체의 메서드입니다.jQuery를 사용하여 핸들러를 바인딩하는 경우 해당 이벤트는 의 인스턴스가 되며 의 jQuery 버전이 됩니다.addEventListener핸들러를 바인딩하려면 의 원시 DOM 버전이 됩니다. 어느 쪽이든 필요한 작업을 수행합니다.

예:

$('#ma_link').click(function($e) {
    $e.preventDefault();
    doSomething();
});

document.getElementById('#ma_link').addEventListener('click', function (e) {
    e.preventDefault();
    doSomething();
})

2:return false;

InjQuery:

이벤트 처리기에서 false를 반환하면 event.stopPropagation() 및 event.preventDefault()가 자동으로 호출됩니다.

따라서 jQuery를 사용하면 이 방법을 사용하여 기본 링크 동작을 방지할 수 있습니다.

$('#ma_link').click(function(e) {
     doSomething();
     return false;
});

원시 DOM 이벤트를 사용하는 경우 HTML 5 사양이 이 동작을 지시하므로 최신 브라우저에서도 작동합니다.그러나 이전 버전의 사양은 그렇지 않으므로 이전 버전의 브라우저와 최대 호환성이 필요한 경우 다음을(를) 호출해야 합니다..preventDefault()노골적으로사양 세부 정보는 event.preventDefault() vs return false(jQuery 없음)를 참조하십시오.

href를 다음으로 설정할 수 있습니다.#!대신에#

예를들면,

<a href="#!">Link</a>

클릭하면 스크롤이 수행되지 않습니다.

주의하세요! 이렇게 하면 클릭해도 브라우저 기록에 항목이 추가되는데, 이는 링크를 클릭한 후 사용자의 뒤로 가기 버튼이 이전에 있었던 페이지로 이동하지 않는다는 것을 의미합니다.이러한 이유로 접근 방식을 사용하거나 둘 다 함께 사용하는 것이 더 나을 것입니다.

다음은 이를 설명하는 Fiddle입니다(스크롤바가 나올 때까지 브라우저를 아래로 스크롤하기만 하면 됩니다).

---

스펙 덕후들의 경우 - 이 기능이 작동하는 이유:

이 동작은 조각 식별자 탐색 섹션의 HTML5 규격에 지정됩니다.href가 있는 링크가"#"문서가 맨 위로 스크롤되는 원인은 이 동작이 빈 조각 식별자를 처리하는 방법으로 명시적으로 지정되기 때문입니다.

2. 가 빈 문자열일 경우, 문서의 표시된 부분은 문서의 맨 위에 있습니다.

사용"#!"그 대신 단순히 이 규칙을 피하기 때문에 작동합니다. 같은 일반적인 하지 않을 것 입니다. 일반적인 프래그먼트와 눈에 띄게 다르므로 편리한 프래그먼트 식별자를 만들 뿐입니다.id아니면name당신의 페이지에 있는 요소의.에 거의 것을 수 빈 ' 다와 입니다. 충분하지 않은 프래그드는 빈 문자열, 단어 'top' 또는 일치하는 문자열뿐입니다.name아니면id페이지에 요소의 속성을 입력합니다.

좀 더 정확하게 말하면 fragid에서 문서의 표시된 부분을 결정하는 다음 알고리즘에서 8단계로 넘어가도록 하는 fragment 식별자가 필요합니다.

1. URL 파서 알고리즘을 URL에 적용하고 fragid를 결과 구문 분석된 URL의 fragment 구성 요소로 지정합니다.

2. 빈 문자열인 경우, 문서의 표시된 부분이 문서의 맨 위에 있습니다. 알고리즘을 여기서 중지합니다.

3. 백분율-복호화의 결과가 되겠습니다.

4. UTF-8 디코더 알고리즘을 에 적용한 결과라고 가정합니다. UTF-8 디코더에서 디코더 오류가 발생하면 디코더를 중단하고 대신 레이블이 지정된 단계로 점프합니다.

5. DOM에 ID가 정확히 다음과 같은 요소가 있는 경우 트리 순서의 첫 번째 해당 요소가 문서의 표시된 부분입니다. 여기서 알고리즘을 중지합니다.

6. 디코딩된 fragid 없음:DOM에 값이 (아니오)와 정확히 일치하는 이름 속성을 가진 요소가 있는 경우, 트리 순서의 첫 번째 해당 요소는 문서의 표시된 부분입니다. 여기서 알고리즘을 중지합니다.

7. fragid가 문자열에 대해 ASCII 대소문자를 구분하지 않는 일치인 경우top, 그러면 문서의 표시된 부분이 문서의 맨 위에 있습니다. 알고리즘을 여기서 중지합니다.

8. 그렇지 않으면 문서에 표시된 부분이 없습니다.

8단계를 누르고 문서에 표시된 부분이 없는 한 다음과 같은 규칙이 적용됩니다.

표시된 부분이 없는 경우...그러면 사용자 에이전트는 아무것도 하지 않아야 합니다.

그래서 브라우저가 스크롤되지 않는 겁니다.

이 코드를 쉽게 활용할 수 있습니다.

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

이 방법은 페이지 새로 고침을 강제하지 않으므로 스크롤 막대가 제자리에 유지됩니다.또한 jQuery를 사용하여 onclick 이벤트를 프로그래밍적으로 변경하고 클라이언트 사이드 이벤트 바인딩을 처리할 수 있습니다.

이러한 이유로 위의 솔루션이 다음과 같은 경우보다 더 좋습니다.

<a href="javascript:myClickHandler();">Link Title</a>
<a href="#" onclick="myClickHandler(); return false;">Link Title</a>

여기서 마지막 솔루션은 myClickHandler 메서드가 실패하지 않는 경우에만 스크롤 점프 문제를 방지합니다.

당신은 바꾸어야 합니다.

<a href="#">My Link</a>

로.

<a href="javascript:;">My Link</a>

이렇게 하면 링크가 클릭되면 페이지가 위쪽으로 스크롤되지 않습니다.이는 href="#"을 사용한 후 기본 이벤트가 실행되지 않도록 하는 것보다 깔끔합니다.

나는 이 질문에 대한 첫번째 답에 대해 이것에 대한 좋은 이유가 있습니다. 예를 들어.return false;호출된 함수가 오류를 발생시킬 경우 실행되지 않습니다. 또는 추가할 수 있습니다.return false;에 이르기까지doSomething()기능을 하고 나서 사용하는 것을 잊어버립니다.return doSomething();

호출한 코드에서 false를 반환하는 것이 효과가 있으며 여러 상황에서 선호되는 방법이지만 이 방법을 사용할 수도 있습니다.

<a href="javascript:;">Link Title</a>

SEO에 관한 한 링크를 무엇에 사용할 것인가에 따라 다릅니다.실제로 다른 컨텐츠에 링크하는 데 사용할 경우 이상적으로 여기서 의미 있는 것을 원한다는 것에 동의합니다. 하지만 기능 목적으로 링크를 사용하는 경우 포스트 도구 모음(볼드, 기울임꼴, 하이퍼링크 등)에 대한 스택 오버플로처럼 링크를 사용하는 경우에는 문제가 되지 않을 수 있습니다.

시도해 보기:

<a href="#" onclick="return false;">My Link</a>

만약 당신이 단순히 변경할 수 있다면.hrefvalue, 다음을 사용해야 합니다.

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

제가 방금 생각해낸 또 다른 깔끔한 해결책은 jQuery를 사용하여 클릭 동작이 발생하여 페이지가 스크롤되는 것을 방지하는 것입니다. 다만,href="#"연결 고리

<script type="text/javascript">
    /* Stop page jumping when links are pressed */
    $('a[href="#"]').live("click", function(e) {
         return false; // prevent default click action from happening!
         e.preventDefault(); // same thing as above
    });
</script>

처음부터 페이지 상단보다 더 감각적인 것으로 연결합니다.그런 다음 기본 이벤트를 취소합니다.

실용적 진보의 규칙 2 참조.

또한 event.preventDefault inside on click 속성을 사용할 수 있습니다.

<a href="#" onclick="event.preventDefault(); doSmth();">doSmth</a>

클릭 이벤트를 추가로 작성할 필요가 없습니다.

event.preventDefault()스크롤은 중지되지만 링크 상태는 다음으로 변경되지 않습니다.visited (color), 내게 필요한 건"3년 늦어진" 솔루션은 너무 늦지 않고 예상치 못한 부작용을 제거합니다.내가 만드는 href는 루프("i"로 색인화된) "#i!"에 있으며, 여기서 i는 앵커 태그의 텍스트를 포함하는 배열에 대한 인덱스입니다.매력적으로 작용합니다.(다른 ID가 i로 설정되어 있는 경우를 제외하고는 #나도 작업할 것입니다.

href='jav스크립트:function ()' 방식을 사용하고 싶은데 페이지 크기에 11바이트(jav스크립트 :)에 함수명 바이트를 더한 값)를 추가합니다.이것을 1000 hrefs만큼 곱하면 페이지 크기에 16kb+가 추가됩니다.(예, 페이지 구성은 사용자에게는 도움이 되지만 사용자에게는 도움이 되지 않습니다.)그래서 아마 다른 상황에서는 javascript: 솔루션을 사용할 것입니다.

붕괴를 위한 부트스트랩 3의 경우 닻에 data-target을 지정하지 않고 href에 의존하여 target을 결정하면 이벤트가 방지됩니다.데이터 타겟을 사용하는 경우 이벤트를 직접 방지해야 합니다.

<button type="button" class="btn btn-default" data-toggle="collapse" data-target="#demo">Collapse This</button>

<div id="demo" class="collapse"> 
<p>Lorem ipsum dolor sit amet</p>
</div>

이렇게 간단하게 쓸 수도 있습니다:

<a href="#!" onclick="function()">Delete User</a>

함수를 호출할 때 다음 순서로 수행합니다.return false예:

<input  type="submit" value="Add" onclick="addNewPayment();return false;">

상단과 하단의 두 링크가 포함된 페이지를 작성합니다.상단 링크를 클릭하면 하단 링크가 있는 페이지 아래로 스크롤해야 합니다.하단 링크를 클릭하면 페이지 상단까지 스크롤해야 합니다.

<a onclick="yourfunction()">

잘 작동합니다. href="#"를 추가할 필요가 없습니다.

CSS를 확인해 보는 것이 좋을 것 같습니다.여기에 있는 예: https://css-tricks.com/the-checkbox-hack/ 다음이 있습니다.position: absolute; top: -9999px;. 이것은 Chrome에서 특히 이상한 것입니다.onclick="whatever"클릭한 요소의 절대 위치로 이동합니다.

제거하기position: absolute; top: -9999px;,위해서display: none;도움이 될 겁니다

언급URL : https://stackoverflow.com/questions/1601933/how-do-i-stop-a-web-page-from-scrolling-to-the-top-when-a-link-is-clicked-that-t