복붙노트

[JQUERY] 어떻게 해제 앵커에 "점프"페이지를로드 할 때?

JQUERY

어떻게 해제 앵커에 "점프"페이지를로드 할 때?

해결법

  1. 1.당신의 수정 작동하지 않는 이유는 무엇입니까? 당신은 데모 페이지가 - 나는 정확하게 질문을 이해 있는지 확실하지 않습니다? 당신이 시도 할 수 :

    당신의 수정 작동하지 않는 이유는 무엇입니까? 당신은 데모 페이지가 - 나는 정확하게 질문을 이해 있는지 확실하지 않습니다? 당신이 시도 할 수 :

    if (location.hash) {
  setTimeout(function() {

    window.scrollTo(0, 0);
  }, 1);
}

    편집 : 테스트 및 Windows에서 파이어 폭스, IE & 크롬에서 작동합니다. 편집 2 : 이동에서는 setTimeout () 안은 경우 블록, 소품 @vsync.

  2. 2.여기에 내 대답을 참조하십시오 유래 답변

    여기에 내 대답을 참조하십시오 유래 답변

    트릭은 빨리 해시 태그를 제거하고 자신의 사용을 위해 그 값을 저장하는 것입니다 :

    당신이 $에 () 또는 $ (창) .load ()를 너무 늦을 것 브라우저가 이미 태그에 이동 등의 기능 코드의 일부를 두지 않는 것이 중요합니다.

    // store the hash (DON'T put this code inside the $() function, it has to be executed 
// right away before the browser can start scrolling!
var target = window.location.hash,
    target = target.replace('#', '');

// delete hash so the page won't scroll to it
window.location.hash = "";

// now whenever you are ready do whatever you want
// (in this case I use jQuery to scroll to the tag after the page has loaded)
$(window).on('load', function() {
    if (target) {
        $('html, body').animate({
            scrollTop: $("#" + target).offset().top
        }, 700, 'swing', function () {});
    }
});

  3. 3.당신은에있어 어떤 탭 추적하는 다른 방법이있다; 아마도 숨겨진 필드에 쿠키, 또는 값을 설정, 등 등

    당신은에있어 어떤 탭 추적하는 다른 방법이있다; 아마도 숨겨진 필드에 쿠키, 또는 값을 설정, 등 등

    난 당신이 부하의 페이지 점프를하지 않으려면 그들에 우선 해시를 사용하는 주된 이유가 정확히 무엇을 할 수 있도록하기 때문에, 당신은 오히려 해시보다는 이러한 다른 옵션 중 하나를 사용하여 더 나을 것이라고 말할 것이다 당신 "차단하고자 재.

    또 다른 점 - 당신의 해시 링크가 문서에 태그의 이름과 일치하지 않을 경우 페이지가 이동하지 않습니다 그래서 아마도 당신이 해시를 계속 사용하려는 경우 태그가 다른 이름이되도록 내용을 조작 할 수 있습니다. 일관된 접두사를 사용하는 경우, 당신은 여전히 ​​다음 사이에 점프에 자바 스크립트를 사용할 수 있습니다.

    희망이 도움이.

  4. 4.나는 dave1010의 솔루션을 사용하지만, 나는 $ (). 준비 함수 안에 넣으면 그것은 조금 불안해했다. 내가 이런 짓을 그래서 : (안 $ 내부 () 준비.)

    나는 dave1010의 솔루션을 사용하지만, 나는 $ (). 준비 함수 안에 넣으면 그것은 조금 불안해했다. 내가 이런 짓을 그래서 : (안 $ 내부 () 준비.)

        if (location.hash) {               // do the test straight away
        window.scrollTo(0, 0);         // execute it straight away
        setTimeout(function() {
            window.scrollTo(0, 0);     // run it a bit later also for browser compatibility
        }, 1);
    }

  5. 5.내가 탭을 구현할 때, 나는 그런 일을 썼다 :

    내가 탭을 구현할 때, 나는 그런 일을 썼다 :

        <script>
    $(function () {         
        if (location.hash != "") {
            selectPersonalTab(location.hash);
        }
        else {
            selectPersonalTab("#cards");
        }
    });

    function selectPersonalTab(hash) {
        $("#personal li").removeClass("active");
        $("a[href$=" + hash + "]").closest("li").addClass("active");
        $("#personaldata > div").hide();
        location.hash = hash;
        $(hash).show();
    }

    $("#personal li a").click(function (e) {
        var t = e.target;
        if (t.href.indexOf("#") != -1) {
            var hash = t.href.substr(t.href.indexOf("#"));
            selectPersonalTab(hash);
            return false;
        }
    });
</script>

  6. 6.답변 없음 나는 일 년 동안 변경 될 수 있습니다, 일부 답변은 전혀 일을하지 않는, 어떤 솔루션을 가기 다음 페이지 앵커에 점프를 참조 나를 위해 충분한 일을하지 않습니다. 내 기능은 다른 사람에게 도움이되기를 바랍니다.

    답변 없음 나는 일 년 동안 변경 될 수 있습니다, 일부 답변은 전혀 일을하지 않는, 어떤 솔루션을 가기 다음 페이지 앵커에 점프를 참조 나를 위해 충분한 일을하지 않습니다. 내 기능은 다른 사람에게 도움이되기를 바랍니다.

    /**
 * Prevent automatic scrolling of page to anchor by browser after loading of page.
 * Do not call this function in $(...) or $(window).on('load', ...),
 * it should be called earlier, as soon as possible.
 */
function preventAnchorScroll() {
    var scrollToTop = function () {
        $(window).scrollTop(0);
    };
    if (window.location.hash) {
        // handler is executed at most once
        $(window).one('scroll', scrollToTop);
    }

    // make sure to release scroll 1 second after document readiness
    // to avoid negative UX
    $(function () {
        setTimeout(
            function () {
                $(window).off('scroll', scrollToTop);
            },
            1000
        );
    });
}

  7. 7.(스크롤 - 점프에 대한 딥 링크에 매우 유용합니다, 당신은 여전히 ​​사용 앵커하려는 경우에 유용하지 않음) 더러운 CSS는 앵커를 사용하는 모든 시간을 스크롤 머물 수정 :

    (스크롤 - 점프에 대한 딥 링크에 매우 유용합니다, 당신은 여전히 ​​사용 앵커하려는 경우에 유용하지 않음) 더러운 CSS는 앵커를 사용하는 모든 시간을 스크롤 머물 수정 :

    .elementsWithAnchorIds::before {
   content: "";
   display: block;
   height: 9999px;
   margin-top: -9999px; //higher thin page height
}

  8. 8.허용 대답이 아니라 작업을 수행하는 동안, 나는 특히 스크롤 막대가 격렬 사용에 대한 이동합니다 것을 큰 이미지를 포함하는 페이지에 가끔 찾았어요

    허용 대답이 아니라 작업을 수행하는 동안, 나는 특히 스크롤 막대가 격렬 사용에 대한 이동합니다 것을 큰 이미지를 포함하는 페이지에 가끔 찾았어요

     window.scrollTo(0, 0);

    어느 꽤 사용자에 대한주의를 산만하게 할 수 있습니다.

    나는 결국에 정착 솔루션은 실제로 매우 간단하고,의는 하나에 대상에 다른 ID를 사용하는 것을에 location.hash에 사용

    예 :

    다음은 몇 가지 다른 페이지의 링크입니다

    <a href="/page/with/tabs#tab2">Some info found in tab2 on tabs page</a>

    그래서 물론 윈도우가로드에로 이동합니다 탭 페이지에 TAB2의 ID를 가진 요소가있는 경우.

    당신이 ID에 무언가를 추가 할 수 있습니다 그래서 그것을 방지하기 위해 :

    <div id="tab2-noScroll">tab2 content</div>

    그리고 당신은 자바 스크립트에 location.hash에 "-noScroll"추가 할 수 있습니다 :

    <script type="text/javascript">
    $(function() {

        var tabContent = $(".tab_content");
        var tabs = $("#menu li");
        var hash = window.location.hash;


     tabContent.not(hash + '-noScroll').hide();                           
        if(hash=="") {       //^ here
      $('#tab1-noScroll').fadeIn();
     }
        tabs.find('[href=' + hash + ']').parent().addClass('active');

        tabs.click(function() {
            $(this).addClass('active').siblings().removeClass('active');
            tabContent.hide();
            var activeTab = $(this).find("a").attr("href") + '-noScroll'; 
                                                               //^ and here

            $(activeTab).fadeIn();
           return false;
        });

    });
</script>

  9. 9.때문에 CSS 팝업에 대한 앵커 링크를 사용하여 내 경우에는 내가이 방법을 사용했습니다 :

    때문에 CSS 팝업에 대한 앵커 링크를 사용하여 내 경우에는 내가이 방법을 사용했습니다 :

    그냥 그에게 ScrollTop을 설정 한 후 pageYOffset 첫 번째 클릭에 일 및 저장 :

    $(document).on('click','yourtarget',function(){
        var st=window.pageYOffset;
        $('html, body').animate({
                'scrollTop' : st
            });
});

  10. 10.나는이 기능을 다시 실행하지 않고 UI 탭에 대한 방법을 찾은 것 같아요. 지금까지 나는 어떤 문제를 발견하지 않았습니다.

    나는이 기능을 다시 실행하지 않고 UI 탭에 대한 방법을 찾은 것 같아요. 지금까지 나는 어떤 문제를 발견하지 않았습니다.

        $( ".tabs" ).tabs();
    $( ".tabs" ).not(".noHash").bind("tabsshow", function(event, ui) { 
        window.location.hash = "tab_"+ui.tab.hash.replace(/#/,"");
        return false;
    });

    var selectedTabHash = window.location.hash.replace(/tab_/,"");
    var index = $( ".tabs li a" ).index($(".tabs li a[href='"+selectedTabHash+"']"));
    $( ".tabs" ).not(".noHash").tabs('select', index);

    모든 준비 이벤트 내에서. 그것은 해시하지만 일을 "tab_"를 앞에 추가 모두 클릭하고 페이지 해시로드 될 때.

  11. 11.부트 스트랩 V3와이 의지 작업

    부트 스트랩 V3와이 의지 작업

    $ (문서) .ready (함수 () { 경우 ($ ( '. 항법 탭'). 길이) { VAR 해시 =이하면 window.location.hash; VAR hashEl = $ ( 'ul.nav A [HREF = "'+ 해시 + '"] "); 해시 && hashEl.tab ( '쇼'); $ ( '. 항법 탭에'). 기능 (E (클릭) { e.preventDefault (); $ (이) .tab ( '쇼'); 하면 window.location.hash = this.hash; }); hashchange에 // 변경 탭 window.addEventListener ( 'hashchange'함수 () { VAR changedHash =하면 window.location.hash; changedHash && $ ( 'ul.nav A [HREF = "'+ changedHash + '']) 탭 ( '표시').; } 거짓); } }); <링크 REL = "스타일"HREF = "https://maxcdn.bootstrapcdn.com/bootstrap/3.4.0/css/bootstrap.min.css"> <스크립트 SRC = "https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"> <스크립트 SRC = "https://maxcdn.bootstrapcdn.com/bootstrap/3.4.0/js/bootstrap.min.js">

    • 홈
    • 메뉴 1

      홈

      일부 콘텐츠.

      메뉴 1

      1 메뉴 일부 콘텐츠.

    • 12.페이지가 스크롤되어 있는지 확인하려고 만 다음 위치를 재설정 :

      페이지가 스크롤되어 있는지 확인하려고 만 다음 위치를 재설정 :

      var scrolled = false;

$(window).scroll(function(){
  scrolled = true;
});

if ( window.location.hash && scrolled ) {
  $(window).scrollTop( 0 );
}

      Heres는 데모

    • 13.나는 파이어 폭스에서 위의 setTimeout 방법에 많은 성공을하지 않았다.

      나는 파이어 폭스에서 위의 setTimeout 방법에 많은 성공을하지 않았다.

      대신의 setTimeout의, 나는 온로드 기능을 사용했습니다 :

      window.onload = function () {
    if (location.hash) {
        window.scrollTo(0, 0);
    }
};

      그것은 여전히 ​​매우 불행하게도, glitchy입니다.

    • 14.나는이 솔루션을 어떤 일관된 성공을 없었어요.

      나는이 솔루션을 어떤 일관된 성공을 없었어요.

      분명히 인해 점프하기 전에 발생한다는 사실에 자바 스크립트 => 참조 (http://forum.jquery.com/topic/preventing-anchor-jump)

      내 솔루션은 CSS와 기본적으로 상단에있는 모든 앵커를 배치하는 것입니다.

      .scroll-target{position:fixed;top:0;left:0;}

      그런 다음 대상 앵커의 부모 또는 형제 (아마도 빈 EM 태그)에 스크롤에 jQuery를 사용

      <a class="scroll-target" name="section3"></a><em>&nbsp</em>

      URL이 해시를 입력 할 때를 위해 스크롤을위한 JQuery와 예 (페이지가 이미 창 / 탭에로드 할 수 없습니다해야하며, 기타 / 외부 소스에서이 커버 링크)

      setTimeout(function() {
    if (window.location.hash) {               
        var hash = window.location.hash.substr(1);   
        var scrollPos = $('.scroll-target[name="'+hash+'"]').siblings('em').offset().top; 
        $("html, body").animate({ scrollTop: scrollPos }, 1000);    
    }
}, 1);

      또한 당신은 앵커 클릭 동안 페이지의 기본을 방지 할 수 있습니다 다음 목표물로 이동

      <a class="scroll-to" href="#section3">section three</a>

      및 JQuery와

      $('a.scroll-to').click(function(){
    var target = $(this).attr('href').substr(1);
    var scrollPos = $('.scroll-target[name="'+target+'"]').siblings('em').offset().top; 
    $("html, body").animate({ scrollTop: scrollPos }, 1000);
    return false;
});

      자신의 CSS 위치가 상단에 있지만이 방법에 대한 좋은 일이, 앵커 태그의 목표는, 관련 내용 옆에 구조적으로 남아있다. 이 검색 엔진 크롤러가 문제가되지 않습니다 것을 의미한다. 건배,이 helpsGray 희망

    • 15.(이벤트 핸들러 내부) hashchanged에 수직 스크롤 모든 종류의에서 클라이언트를 방지하기 위해이 시도 :

      (이벤트 핸들러 내부) hashchanged에 수직 스크롤 모든 종류의에서 클라이언트를 방지하기 위해이 시도 :

      var sct = document.body.scrollTop;
document.location.hash = '#next'; // or other manipulation
document.body.scrollTop = sct;

      (브라우저 다시 그리기)

    • 16.이 작업을 수행하여 내 문제를 해결 :

      이 작업을 수행하여 내 문제를 해결 :

      // navbar height 
var navHeigth = $('nav.navbar').height();    

// Scroll to anchor function
var scrollToAnchor = function(hash) {
  // If got a hash
  if (hash) {
    // Scroll to the top (prevention for Chrome)
    window.scrollTo(0, 0);
    // Anchor element
    var term = $(hash);

    // If element with hash id is defined
    if (term) {

      // Get top offset, including header height
      var scrollto = term.offset().top - navHeigth;

      // Capture id value
      var id = term.attr('id');
      // Capture name value
      var name = term.attr('name');

      // Remove attributes for FF scroll prevention
      term.removeAttr('id').removeAttr('name');
      // Scroll to element
      $('html, body').animate({scrollTop:scrollto}, 0);

      // Returning id and name after .5sec for the next scroll
      setTimeout(function() {
        term.attr('id', id).attr('name', name);
      }, 500);
    }
  }
};

// if we are opening the page by url
if (location.hash) {
  scrollToAnchor(location.hash);
}

// preventing default click on links with an anchor
$('a[href*="#"]').click(function(e) {
  e.preventDefault();
  // hash value
  var hash = this.href.substr(this.href.indexOf("#"));
  scrollToAnchor(hash);
});`

    from https://stackoverflow.com/questions/3659072/how-to-disable-anchor-jump-when-loading-a-page by cc-by-sa and MIT license

    'JQUERY' 카테고리의 다른 글

    [JQUERY] ()에서는 event.preventDefault 사용 후 이벤트를 트리거하는 방법  (0) 2020.10.18
    [JQUERY] URL에서 쿼리 문자열 제거  (0) 2020.10.18
    [JQUERY] Base64로로 변환 이미지 URL  (0) 2020.10.18
    [JQUERY] 어떻게 활성화 또는 jQuery를 사용하여 앵커를 해제하는 방법?  (0) 2020.10.17
    [JQUERY] jQuery를 처리되지 않는 형식 오류는 : 물체 [대물 윈도우]의 속성 '$'는 함수가 아니다  (0) 2020.10.17
,

티스토리툴바