programing

페이지를 로드할 때 앵커 "점프"를 비활성화하는 방법?

megabox 2023. 10. 16. 21:41
반응형

페이지를 로드할 때 앵커 "점프"를 비활성화하는 방법?

이것은 불가능할 수도 있다고 생각합니다, 최대한 설명해 드리겠습니다.탭(jquery powered)이 포함된 페이지가 있으며 다음을 통해 제어됩니다.

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

<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"로 인해 페이지가 앵커에게 "jump"되지 않습니다.

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

페이지가 로드될 때 "return false"를 시뮬레이션하여 앵커 "jump"가 발생하는 것을 방지할 수 있는 방법이 있습니까?

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

감사해요.

수리가 안 되나요?질문을 제대로 이해했는지 잘 모르겠습니다. 데모 페이지가 있습니까?다음을 시도해 볼 수 있습니다.

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

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

편집: Firefox, IE & Chrome에서 Windows에서 테스트하고 작동합니다.
집 2: 이동setTimeout()에서 안에if블록, 소품 @vsync.

여기에서 내 답변 보기: 스택 오버플로 답변

해시태그를 최대한 빨리 제거하고 사용자가 사용할 수 있도록 해시태그 값을 저장하는 것이 방법입니다.

$() 또는 $(window).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 () {});
    }
});

쿠키 또는 숨겨진 필드에 값을 설정하는 등 사용자가 어떤 탭에 있는지 추적하는 다른 방법이 있습니다.

페이지가 로드되는 것을 원하지 않는다면 해시보다 이러한 다른 옵션 중 하나를 사용하는 것이 좋을 것입니다. 해시 대신 해시를 사용하는 주된 이유는 차단하고자 하는 것을 정확히 허용하기 위해서입니다.

또 다른 점은 해시 링크가 문서의 태그 이름과 일치하지 않으면 페이지가 점프하지 않기 때문에 해시를 계속 사용하려면 태그 이름이 다르게 지정되도록 내용을 조작할 수 있습니다.만약 당신이 일관된 접두사를 사용한다면, 당신은 여전히 자바스크립트를 사용하여 그 때 사이를 이동할 수 있을 것입니다.

도움이 되길 바랍니다.

dave1010의 솔루션을 사용했는데 $(.ready) 함수에 넣었을 때 조금 흔들렸습니다.그래서 이렇게 했어요: ($.ready가 아닌)

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

  1. 브라우저가 다음으로 이동<element id="abc" />주소에 http://site.com/ #abc 해시가 있고 id="abc"인 요소가 표시되는 경우.따라서 기본적으로 요소를 숨겨야 합니다.<element id="anchor" style="display: none" />의 표시 요소가 없으면 페이지에 id= hash인 눈에 보이는 요소가 없으면 브라우저가 점프하지 않습니다.

  2. URL에서 해시를 확인한 다음 기본적으로 숨겨진 prpriate 요소를 찾아 표시하는 스크립트를 만듭니다.

  3. 시 와 유사한 하고 "" 합니다를 합니다.return false;클릭 이벤트의 결과입니다.

탭을 구현할 때 다음과 같은 내용을 적었습니다.

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

더티 CSS는 앵커를 사용할 때마다 스크롤 업 상태를 유지하도록 수정할 뿐입니다(스크롤 점프에 앵커를 사용하려면 유용하지 않습니다. 딥 링크에 매우 유용합니다.)

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

대답은 잘 들어맞지만, 스크롤 바가 마구 사용하는 큰 이미지가 포함된 페이지에서는 가끔 발견했습니다.

 window.scrollTo(0, 0);

이것은 사용자에게 꽤 주의를 산만하게 할 수 있습니다.

꽤 은 과 다른 하는 것입니다. 그것은 타겟에서 사용된 것과 다른 ID를 사용하는 것입니다.location.hash

예:

여기 다른 페이지의 링크가 있습니다.

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

ID 를의 ,tab2탭 페이지에서 창은 로드 시 해당 창으로 점프합니다.

따라서 ID에 무언가를 추가하여 이를 방지할 수 있습니다.

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

그리고 당신은 그 다음에 덧붙일 수 있습니다."-noScroll".location.hash자바스크립트에서:

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

CSS 팝업에 앵커 링크를 사용하기 때문에 이런 방식으로 사용했습니다.

페이지 저장만 하면 됩니다.첫 번째 항목을 클릭할 때 오프셋을 설정한 다음 ScrollTop을 다음과 같이 설정합니다.

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

기능을 다시 하지 않고 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_"을 붙여주지만 클릭할 때와 해시로 로드된 페이지 모두에서 작동합니다.

부트스트랩 v3에서 작동합니다.

$(document).ready(function() {
  if ($('.nav-tabs').length) {
    var hash = window.location.hash;
    var hashEl = $('ul.nav a[href="' + hash + '"]');
    hash && hashEl.tab('show');

    $('.nav-tabs a').click(function(e) {
      e.preventDefault();
      $(this).tab('show');
      window.location.hash = this.hash;
    });

    // Change tab on hashchange
    window.addEventListener('hashchange', function() {
      var changedHash = window.location.hash;
      changedHash && $('ul.nav a[href="' + changedHash + '"]').tab('show');
    }, false);
  }
});
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.0/css/bootstrap.min.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.0/js/bootstrap.min.js"></script>
<div class="container">
<ul class="nav nav-tabs">
  <li class="active"><a data-toggle="tab" href="#home">Home</a></li>
  <li><a data-toggle="tab" href="#menu1">Menu 1</a></li>
</ul>

<div class="tab-content">
  <div id="home" class="tab-pane fade in active">
    <h3>HOME</h3>
    <p>Some content.</p>
  </div>
  <div id="menu1" class="tab-pane fade">
    <h3>Menu 1</h3>
    <p>Some content in menu 1.</p>
  </div>
</div>
</div>

다른 접근법

페이지가 스크롤되었는지 확인한 후 위치를 재설정합니다.

var scrolled = false;

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

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

Heres a demo

나는 위의 것에 대해 큰 성공을 거두지 못했습니다.setTimeout파이어폭스의 메소드입니다.

setTimeout 대신 onload 기능을 사용했습니다.

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

안타깝게도 아직도 결함이 심합니다.

저는 이러한 솔루션에 대해 지속적인 성공을 거두지 못했습니다.

자바스크립트 => 참조 (http://forum.jquery.com/topic/preventing-anchor-jump) 보다 점프가 먼저 이루어진 것으로 보입니다.

제 해결책은 CSS로 모든 앵커를 기본적으로 맨 위에 배치하는 것입니다.

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

그런 다음 jquery(jquery)를 사용하여 대상 앵커의 상위 또는 형제(또는 빈 전자 메일 태그)로 스크롤합니다.

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

해시로 URL을 입력할 때 스크롤하는 jquery 예제
(페이지가 창/탭에 이미 로드되어 있으면 안 되며, 여기에는 다른/outside 소스의 링크가 포함됩니다.)

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>

그리고 잡동사니

$('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 위치가 상위에 있지만 관련 콘텐츠 옆에 구조적으로 남아 있는 앵커 태그 대상입니다.

이것은 검색 엔진 크롤러에 문제가 없다는 것을 의미합니다.

건배, 이게 도움이 되길 바랍니다.
회색

이벤트 핸들러 내에서 클라이언트가 변경된 해시에 대해 어떤 종류의 수직 스크롤도 하지 못하도록 하려면 이 작업을 수행합니다.

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

(browser 다시 그리기)

이렇게 함으로써 내 프롤렘을 해결했습니다.

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

언급URL : https://stackoverflow.com/questions/3659072/how-to-disable-anchor-jump-when-loading-a-page

반응형

'programing' 카테고리의 다른 글

MYSQL 오류:사용자 'root'@'localhost'(1045)에 대한 액세스가 거부되었습니다.  (0) 2023.10.16
최대 절전 모드 방언 및 XAMPP(MySQL-MariaDB) 문제  (0) 2023.10.16
PHPExcel을 사용한 CSV 내보내기/가져오기  (0) 2023.10.16
SQL - IF EXPEDUTE ELSER 구문 오류  (0) 2023.10.16
Spring Boot 앱: application.properties를 선택하지 않습니까?  (0) 2023.10.16

'programing'의 다른글

  • 현재글페이지를 로드할 때 앵커 "점프"를 비활성화하는 방법?

관련글

댓글

티스토리툴바