[jquery] 페이지를로드 할 때 앵커 “점프”를 비활성화하는 방법은 무엇입니까?

나는 이것이 가능하지 않을 수도 있다고 생각하며 최선을 다해 설명 할 것입니다. 다음으로 제어되는 탭 (jquery 기반)이 포함 된 페이지가 있습니다.

이전 질문에서 다른 사용자가 제공 한대로이 코드를 사용하고 있습니다.

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

     $('html, body').animate({scrollTop:0}); // this is my "fix"

        var tabContent = $(".tab_content");
        var tabs = $("#menu li");
        var hash = window.location.hash;
     tabContent.not(hash).hide();
        if(hash=="") {
      $('#tab1').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");

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

    });
</script>

이 코드는 “탭”페이지를 직접 방문 할 때 잘 작동합니다.

그러나 다른 페이지의 개별 탭에 연결해야합니다. 이렇게하려면 코드 window.location.hash에 적절한 탭이 표시됩니다.

페이지는 “return false”때문에 앵커로 “점프”하지 않습니다.

그러나이 이벤트는 클릭 이벤트에서만 트리거됩니다. 따라서 다른 페이지에서 “탭”을 방문하면 “점프”효과가 트리거됩니다. 이 문제를 해결하기 위해 자동으로 페이지 상단으로 스크롤하지만, 이런 일이 발생하지 않았 으면합니다.

페이지가로드 될 때 “return false”를 시뮬레이션하여 앵커 “점프”가 발생하지 않도록하는 방법이 있습니까?

이것이 충분히 명확하기를 바랍니다.

감사

답변

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

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

// 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 () {});
    }
});

    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);
    }

    <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>

/**
 * 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
        );
    });
}

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