animated.scrollleft에서 history.back 사용

Question

가로 웹 페이지에서 뒤로 버튼으로 어려움을 겪고 있습니다. 현재 내가 backbutton을 사용하는 방법은 onclick = "history.go (-1)입니다. 문제는 다른 모든 버튼에서 발생하는 슬라이딩을 사용하지 못하게하는 것입니다. 나머지 웹 사이트는 잘 작동하지만, 이것은 내가 통제 할 수있는 유일한 버그입니다. 다음 웹 사이트를 방문하십시오 : www.gerardsteurvormgeving.nl

일부 코드는 내가 사용하는 코드입니다. "terug"onclick = "history.go (-1) 및이 텍스트에서 찾을 수있는 자바 스크립트입니다. 누군가 도와 주시면 감사하겠습니다. !!!! 미리 감사드립니다!

모두 최고입니다. ,

제라드

<!-- JavaScript --> 
    <script type="text/javascript"src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script> 
    <script type="text/javascript" src="jquery.easing.1.3.js"></script> 
    <script src="main.js"></script> 
    <script type="text/javascript"> 


$(function() { 
$('.blue').bind('click', function (event) { 
history.pushState({}, '', $(this).attr("href")); 

var $anchor = $(this); 
$('html, body').stop().animate({ 
scrollLeft: $($anchor.attr('href')).offset().left - ($(window).width() - $($anchor.attr('href')).width())/2 
}, 2500); 


event.preventDefault(); 
}); 
}); 

HTML

<a class="blue" href="#section4" title="home" style="position: absolute; left: 94.99%; top: 7.22%; width: 0.31%; height: 3.47%; z-index: 2;"></a> 
<a class="blue" href="#section2" title="contact" style="position: absolute; left: 94.92%; top: 13.06%; width: 0.46%; height: 3.33%; z-index: 2;"></a> 
<a class="blue" title="terug" onclick="history.go(-1)" style="position: absolute; left: 94.96%; top: 27.64%; width: 0.38%; height: 3.75%; z-index: 2;">  </a> 
<a class="blue" href="#section1" title="download pagina" style="position: absolute; left: 98.11%; top: 71.25%; width: 0.93%; height: 9.86%; z-index: 2;"></a> 

<a href="subpages/7 trainingen en de teamdag/sociale vaardigheden.html" title="de keuze re-integratie trainingen - sociale vaardigheden" style="position: absolute; left: 96.46%; top: 22.22%; width: 1.88%; height: 6.53%; z-index: 2;"></a> 

<a href="subpages/7 trainingen en de teamdag/beroepsorientatie.html" title="de keuze re-integratie trainingen - beroepsorientatie" style="position: absolute; left: 96.6%; top: 41.67%; width: 1.67%; height: 6.53%; z-index: 2;"></a> 

<a href="subpages/7 trainingen en de teamdag/solliciteren.html" title="de keuze re-integratie trainingen - sollicitatie trainingen" style="position: absolute; left: 96.76%; top: 57.92%; width: 1.26%; height: 9.86%; z-index: 2;"></a> 

</div> 

Answer 1

이미 jQuery를 사용하는 경우, 왜 단순히 jQuery.BBQ 또는 hashchange 또는 history.js 같은 역사 관리자를 추가?

그런 식으로 뒤로 버튼은 예상대로 작동합니다. 당신이 사용하고있는 것과 같은 다른 기술도 해결책을 가질 수 있지만 위에서 언급 한 것과 같은 이력 관리 라이브러리를 사용하면 더 좋습니다.

다음은 HTML5를 사용하여 working demo입니다 :

이 당신이 원하는 슬라이딩 효과가없는,하지만 아이디어 :

HTML 코드

<h1>Navigation Without Refresh <span></span></h1> 
<h2>Current Page: <span>/</span></h2> 
<ul id="menu-nav"> 
    <li><a href="/page-1/" title="Pagina 1">Page 1</a></li> 
    <li><a href="/page-2/" title="Pagina 2">Page 2</a></li> 
    <li><a href="/page-3/" title="Pagina 3">Page 3</a></li> 
</ul> 

당신에게 줄 것이다 자바 스크립트 코드

var setCurrentPage = function(url) { 
    $('h2 span').html(url || "/"); 
    $("#menu-nav a[href='" + url + "']").fadeTo(500, 0.3); 
}; 

$('#menu-nav a').click(function(e){ 
    e.preventDefault(); 
    var targetUrl = $(this).attr('href'), 
    targetTitle = $(this).attr('title'); 

    $("#menu-nav a[href='" + window.location.pathname + "']").fadeTo(500, 1.0); 

    window.history.pushState({url: "" + targetUrl + ""}, targetTitle, targetUrl); 
    setCurrentPage(targetUrl); 
}); 

window.onpopstate = function(e) { 
    $("#menu-nav a").fadeTo('fast', 1.0); 
    setCurrentPage(e.state ? e.state.url : null); 
};