jQuery in page back button 스크롤

Question

페이지 내의 내용에 앞뒤 단추를 사용할 수있는 페이지를 만들려고합니다.

• http://www.asual.com/jquery/address 오전 데 문제는 콜백 함수에서 작동하도록하는 방법이다

에서 선보 나는 JQuery와 주소를 사용하여 기본 기능을 수행 한 jQuery scrollTo와의 조화를 통해 애니메이션 백을 제공하고 스크롤링 경험을 전달할 수 있습니다. 당신이 문제를 볼 수 있는지 임 정말하지만 필자는 여전히 학습 때문에 내 지식의 범위를 벗어난 어렵다 밤은으로

//Navigation between slides 
$('.nav-button').click(function(e) { 
    e.preventDefault(); 
    $.scrollTo($(this).attr('href'), 'slow', {easing:'easeInOutExpo'}); 
}); 

//Storage and activation of back and forwards attributes 
$('a').click(function() { 
    $.address.value($(this).attr('href')); 
}); 

//Callback to scroll on back or forwards 
//NEED HELP HERE 
$.address.change(function(event) { 
    $.scrollTo(event.value(), 'slow', {easing:'easeInOutExpo'}); 
}); 

. 어떤 도움이라도 대단히 감사합니다.

내가 문제를 표시 할 바이올린을 만든 :

모든 컨텐츠

은

가 UPDATE 일반적인 클래스와 다양한 DIV 요소를 사용하여 서로 다른 "페이지"로 구분 한 페이지 내에 포함되어 있습니다 훨씬 선명하게.

jsfiddle.net/d7uZ7/6

JQuery와의 바닥 부분은 뒤로 또는 앞으로 페이지 이벤트

해결 한 후 스크롤을 실행하는 데 사용되는 것입니다 :

그래서 오랜 시간이 지난 후에이 솔루션 (일종의)이 발견되었습니다. 또한 채팅을하지 않고서도 JacobMcLock이 모두 불가능했을 것입니다.

어쨌든, 내 원래의 게시물의 마지막 부분은 다음과 같은 두 가지 코드 블록

//Method 1 
$.address.change(function (event) { 
    var value = event.value, 
    i = value.indexOf('#'), 
    $element = (i === -1) ? $("body") : $(value.substr(i, value.length-1)); 
    $.scrollTo($element, 'slow', {easing:'easeInOutExpo'}); 
}); 

//Method 2 
$(window).on('hashchange', function(event) { 
    event.preventDefault(); 
    $.address.change(function (event) { 
     var value = event.value, 
     i = value.indexOf('#'), 
     $element = (i === -1) ? $("body") : $(value.substr(i, value.length-1)); 
     $.scrollTo($element, 'slow', {easing:'easeInOutExpo'}); 
    }); 
}); 

최고 속도에 대한 첫 번째 블록을 사용

중 하나를 변경하지만, 호환성 부족합니다. 이 기능은 Chrome 및 Safari에서 원하는대로 작동하며 다른 사람들에게는 이상 할 것입니다. 이는 hashchange 및 popstate 이벤트를 올바르게 처리하기 때문에 발생합니다. 이상하게도 일부 오래된 브라우저도 제대로 작동합니다.

두 번째 방법은 훨씬 느리지 만 (애니메이션 시작시 상당한 지연이 있음) 거의 모든 브라우저에서 잘 작동합니다. 네, 단지 세미 - 우물, 때로는 여전히 실패합니다. 그래서 현실은 이러한 태그를 올바르게 사용하지 않는 브라우저로 인해 이전의 페이지가 전환되지 않는 지루하고 오래된 애니메이션으로 인해 어려움을 겪을 가능성이 높습니다. 너무 슬퍼. 엄청난 양의 코딩을하고 싶지 않다면 말입니다.

Answer 1

나는 event.value()이 당신이 원하는 것이라고 생각하지 않습니다. event.value의 실제 내용은 http://www.asual.com/jquery/address/samples/api/ 인이 페이지의 예를 참조하십시오. href 또는 요소 ID가 아닌 URL의 문자열입니다. URL에 값을 주입하는 방법에 따라 달라지는 값에서 실제로 스크롤하려는 요소를 얻으려면 추가 작업을해야합니다.