HTML 및/또는 JS로 다음 페이지 앵커로 이동하는 방법?

Question

HTML 및/또는 Javascript를 사용하여 다음 페이지 앵커가 자동으로 작동하고 이동하는 것이 가능합니까?

Answer 1

당신이 알고있는 앵커/아이템과 관련 있다고 가정 할 때; jQuery를 사용하는 경우에는 "Next Sibling"에 대한 선택자가 있습니다. 여기에 문서를 찾을 수 :

http://api.jquery.com/next-siblings-selector/

나는 그냥 실행하고; 그렇지 않으면 나는 당신을 위해 전체 선택자를 만들 겠지만, 나중에 오늘 대답이 없으면 나는 함께 정리할 것입니다. 추가 읽기를 기반으로 사실 편집

, 나는 당신이 조금 더 많은 작업입니다 ... 페이지의 현재 스크롤 위치를 기준으로 다음 앵커 상대를 찾고 있습니다 quessing ...하지만하고 할 수있다 ... (다시, 나는 JS를 제공하기 위해 오늘 나중에하려고 노력할 것이다).

편집

이 100 %되지 않습니다 완료; 그러나 당신이 일반적인 아이디어를 얻을 정도로 충분해야합니다. 귀하의 페이지가 정적 인 내용이라면 페이지를 살펴보고 문서상의 모든 오프셋을 캐싱 할 것을 권장합니다. 요소 오프셋을 결정하는 것은 꽤 느릴 수 있습니다 (특히 구형 브라우저에서). 당신이 페이지는 동적 콘텐츠를 가지고 앵커의 위치가 문서 내에서 고정되지 않은 경우

var _anchorOffets = {}; 

$(document).ready(function() { 
    $("A[id]:not(A[href])").each(function (index, value) { 
    var $anchor = $(value); 
    _anchorOffets[$anchor.attr("id")] = $anchor.offset().top; 
    }); 
}); 

function getNextAnchorId() { 
    var $window = $(window); 
    var minOffset = $window.scrollTop() + $window.height(); 

    for (var anchor in _anchorOffets) { 
    if (_anchorOffets[anchor] >= minOffset) { 
     return anchor; 
    } 
    } 

    return null; 
} 

대안으로, 당신은 당신의 페이지에 따라

function getNextAnchorId() { 
    var result = null; 

    $("A[id]:not(A[href])").each(function (index, value) { 
    var $anchor = $(value); 
    var $window = $(window); 
    var minOffset = $window.scrollTop() + $window.height(); 

    if($anchor.offset().top >= minOffset) { 
     result = $anchor.attr("id"); 
     return false; 
    } 
    }); 

    return result; 
} 

에 가까운 무언가를 찾고있을 것입니다, 당신은해야 할 수도 있습니다 이 아이디어를 확장하십시오. 위의 두 가지 방법 모두 매우 기본적인 문서 레이아웃을 사용합니다. 상대/절대 positing 또는 scrollable div 등으로 계속해서 멋진 일이 있다면, 이것을 강화할 필요가 있습니다 (필자는 코드를 제공 할 수 있습니다). 지금은 기본적으로 페이지 앵커를 찾고 스크롤 위치를 기반으로 앵커를 결정하는 것으로 가정하고 있지만 또한 광범위하게 테스트하지 않았으므로 약간의 연마 작업이 필요할 수도 있습니다. D

Answer 2

나는 당신이 무엇을 찾고 있는지 알고 있습니다. 당신이 아이디의를 알고 있다면 당신은 아마 캘거리 코더에 당신의 코멘트를 읽는 innerText와

Answer 3

하여 앵커를 얻을

function Next(){ 
    var lnkNext = document.getElementById("yourNextAnchorId"); 
    window.location.href = lnkNext.src; 
} 

당신이 아이디의를 모르는 경우 ...이 사용할 수 있습니다, 저는 믿습니다 - 나는 경우 올바르게 이해하십시오 - 현재 URL에서 앵커를 찾으려고합니다. window.locaiton.hash으로이 작업을 수행 할 수 있습니다. 예 :

alert(window.location.hash); 

Answer 4

답변 모두 감사합니다,하지만 난 http://marcgrabanski.com/articles/scrollto-next-article-button-jquery를 구현하여이 작업을 얻을 수 있었다. 이것은 다음 앵커가 아닌 다음 헤더로 이동하지만 앵커를 사용하는 것이 중요하다면 쉽게 적응할 수 있다고 상상합니다.