클라이언트 측 라우팅을 사용하면서 페이지 내에서 링크를 구현하려면 어떻게해야합니까?

Question

나는 클라이언트 측 라우팅을 위해 crossroads.js를 사용하여 SPA에서 작업하고 있습니다. 한 가지 예외를 제외하고는 모든 것이 완벽하게 작동합니다.

이 SPA에는 상당히 큰 페이지가 하나 있는데, 내부 링크를 사용하여 상단에 목차를 제공하고 싶습니다. 예전에 다음과 같이했습니다.

<ul> 
    <li><a href="#Introduction">Introduction</a></li> 
    <li><a href="#Chap1">Chapter 1</a></li> 
    <li><a href="#Chap2">Chapter 2</a></li> 
    <li><a href="#Chap3">Chapter 3</a></li> 
</ul> 

이러한 요소는 해당 페이지의 요소와 해당 ID로 연결됩니다.

그러나 이제는 클라이언트 쪽 라우팅을 사용하고 있으므로이 작업이 잘 작동하지 않는 것 같습니다.

http://myserver.com/#/Books/12/Full 

위 화면의 올바른 위치로 페이지를 이동 않는 링크 중 하나를 클릭하지만 URL을 변경 :

http://myserver.com/#Chap2 

내가 이걸 사용하고이 같은 URL을 가지고 페이지

URL을 유지하면서 SPA의 내부 링크를 처리하는 표준 방법이 있습니까?

Answer 1

는 여기 FIDDLE

<nav> 
    <ul> 
    <li data-rel="div1">DIV 1</li> 
    <li data-rel="div2">DIV 2</li> 
    <li data-rel="div3">DIV 3</li> 
    </ul> 
</nav> 


<div id="div1"> 


</div> 

<div id="div2"> 


</div> 

<div id="div3"> 


</div> 


$(function() { 
    $('nav ul li').click(function() { 
    $('html, body').animate({ scrollTop: $('#'+$(this).data('rel')).offset().top }, 900); 
    }); 
}); 

Answer 2

@mdesdev 날 올바른 방향으로 지적 있어요,하지만 여기에 궁극적으로 나를 위해 일하게 상처 내용은 다음과 같습니다, SPA를 사용

해당 페이지 문서가로드 된 후로드되므로 jQuery 문서 준비 함수를 사용하여 클릭 핸들러를 추가하여 작업 할 수 없습니다.

function scrollToInternal(target) { 
    // #MyContent is the div that needs to be scrolled 
    $('#MyContent').scrollTop($(target).position().top); 
}; 

그런 다음 내 마크 업에, 나는 온 클릭 속성으로이 함수를 호출 : 대신에, 나는 다음과 같은 기능을 만들어 mdesdev 년대로

<ul> 
    <li><a href="#" onclick="scrollToInternal('#Introduction');return false">Introduction</a></li> 
    <li><a href="#" onclick="scrollToInternal('#Chap1');return false">Chapter 1</a></li> 
    <li><a href="#" onclick="scrollToInternal('#Chap2');return false">Chapter 2</a></li> 
    <li><a href="#" onclick="scrollToInternal('#Chap3');return false">Chapter 3</a></li> 
</ul> 

하지 우아한 해결책을하지만, 일하고있어.