jQuery:URL을 호출할 때 앵커로 스크롤하고 브라우저 동작을 대체합니다.

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

  •  19-09-2019
  •  | 
  •  

문제

나는 이미 jQuery 플러그인 ScrollTo를 알고 있지만 지금까지 다음을 실현할 수 있는 방법을 찾지 못했습니다.

사용자가 내 사이트에 접속합니다(내 페이지의 링크를 클릭하는 것이 아니라 입력을 통해) domain.com/bla.php#foo

앵커 "#foo"가 존재합니다.이제 사용자의 브라우저가 자동으로 "#foo"로 스크롤되지 않기를 원합니다. 대신 '#foo' 요소가 뷰의 절대 상단 위치가 아닌 뷰 중앙에 있도록 부드럽게 스크롤하고 싶습니다. 사용자 보기.

지금까지 감사했습니다!

도움이 되었습니까?

해결책

실제 앵커를 생성하지 않는 경우 foo, 오히려 다음과 같은 ID로 앵커를 만듭니다. _foo (뭔가 <a id="_foo">).당신은 처리할 수 있습니다 $(document).ready 이것을 달성하기 위해.

(의사 코드)와 같은 것

$(document).ready(function() { 
    var elem = $('#_' + window.location.hash.replace('#', ''));
    if(elem) {
         $.scrollTo(elem.left, elem.top);
    }
});

다른 팁

Jan Jongboom의 스크립트를 약간 향상 시켰으므로 이제 다음과 같습니다.

$(document).ready(function () {
    // replace # with #_ in all links containing #
    $('a[href*=#]').each(function () {
        $(this).attr('href', $(this).attr('href').replace('#', '#_'));
    });

    // scrollTo if #_ found
    hashname = window.location.hash.replace('#_', '');
    // find element to scroll to (<a name=""> or anything with particular id)
    elem = $('a[name="' + hashname + '"],#' + hashname);

    if(elem) {
         $(document).scrollTo(elem, 800);
    }

});

JavaScript가없는 사용자의 경우 동작이 그대로 유지됩니다.

MachineGhost의 대답은 매우 도움이되었습니다. 함께 패치 한 코드는 URL 매개 변수를 가져 와서 브라우저가 해시 태그로 바꾸어 DOM이 준비 되 자마자 스크롤합니다.

URL은 다음과 같습니다.

www.mysite.com/hello/world.htm?page=contact

연락처는 스크롤하려는 ID의 이름입니다.

<h1 id="contact">Contact Us</h1>

코드는 다음과 같습니다.

// Get any params from the URL
$.extend({
  getUrlVars: function(){
    var vars = [], hash;
    var url = decodeURIComponent(window.location.href);
    var hashes = url.slice(window.location.href.indexOf('?') + 1).split('&');
    for(var i = 0; i < hashes.length; i++)
    {
      hash = hashes[i].split('=');
      vars.push(hash[0]);
      vars[hash[0]] = hash[1];
    }
    return vars;
  },
  getUrlVar: function(name){
    return $.getUrlVars()[name];
 }
});

$(document).ready(function() {
    // Unhide the main content area
    $('section.centered').fadeIn('slow');

    // Create a var out of the URL param that we can scroll to
    var page = $.getUrlVar('page');
    var scrollElement = '#' + page;

    // Scroll down to the newly specified anchor point
    var destination = $(scrollElement).offset().top;
    $("html:not(:animated),body:not(:animated)").animate({ scrollTop: destination-75}, 800 );
    return false;
});

나는 이것을 Chrome과 FF에서 확인했고 매우 잘 작동했습니다. 스크롤 대상이 원하는 정확한 장소로 이동하지 않으면 "대상 -75"조정해보십시오.

위의 게시물을 사용하여 할 수 없었으므로 감사합니다!

/* scrolling to element */
    var headerHeight = $('#header').height() + $('#header-bottom-cap').height() + 10; //When the header position is fixed
    $('a').click(function(){
        var hashEle = $(this).attr('href').split('#');
        if (hashEle.length > 1) {
            if (hashEle[1] == 'top') {
                $('body, html').animate({
                    scrollTop: 0
                },500);
            } else {
            jQuery('body, html').animate({
                scrollTop: $('#'+ hashEle[1]).offset().top - headerHeight
            },500);
            }
        };
    })
        // find element from url
hashname = window.location.hash.replace('#', '');
elem = $('#' + hashname);
if(hashname.length > 1) {
    if(hashname == 'top') {
    $('body, html').animate({
            scrollTop: 0
        },200); 
    } else {
     $('body, html').animate({
            scrollTop: $(elem).offset().top - headerHeight
        },500);
 }
};
/* END scrolling to element */

이 스크립트는 $ (document) .ready (function () {})에 있어야합니다.

스크롤토를 사용할 수 있습니다. 앵커가없는 상태에서 페이지를 렌더링 한 다음 페이지를로드 할 때 실행되는 JavaScript를 사용하여 URL에서 앵커를 가져옵니다. 그런 다음 해당 텍스트를 사용하여 특정 ID로 스크롤 할 수 있습니다.

페이지 중간에 항목을 가져 오는 방법을 잘 모르겠지만 스크롤에 대한 오프셋을 지정할 수 있습니다.

나는 이것이 불가능하다고 말하고 싶지 않지만 ... 적어도 아주 어려울 것입니다. 페이지의 일부가로드 되 자마자 브라우저 (또는 내가 아는 브라우저)가 앵커 포인트로 스크롤합니다. afaik이를 피할 수있는 JavaScript 기반 방법이 없습니다 (브라우저 플러그인이나 무언가가 필요합니다).

그러나 "페이지가 완전히로드 될 때까지 페이지를 표시하지 마십시오"스크립트의 변형을 사용할 수 있다고 생각합니다. 다시 말해, 당신은 다음과 같습니다.

  1. 모든 페이지의 컨텐츠를 사전로드 (예 : 전체 페이지를 감싸는 DIV가있어서) "디스플레이 : 없음"스타일을 넣으십시오)

  2. "Onload"이벤트 핸들러를 페이지에 첨부하여 DIV를 숨기고 ...

  3. 동일한 "Onload"이벤트 핸들러에서 표준 JS 스크롤 메커니즘 (예 : Scrollto)을 사용하여 앵커로 스크롤합니다 (Window.Location을 확인하여 스크롤 할 앵커를 결정할 수 있다고 생각합니다).

이론적으로, 브라우저는 #1과 #2 사이의 브라우저 스크롤이기 때문에 (그리고 스크롤 할 곳이 없기 때문에, 내용이 숨겨져있는 것과 모든 것이 전혀 아무것도하지 않을 것이라고 생각합니다), 스크롤 메커니즘은 스크롤 메커니즘입니다. #3에 사용하는 것은 간섭이 없어야합니다.

즉, 위의 모든 것은 완전히 테스트되지 않은 계획; 당신의 마일리지가 다릅니다. 작동하더라도 구현하기가 고통 스러울 것입니다. 진짜 이 행동을 원한다면, 거의 확실히 문제가되지 않습니다.

그건 불가능하다

편집하다

행동은 완전히 UA의 손에 있습니다.

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