使用history.back製作動畫.scrollleft

Question

我在水平網頁上使用了後退按鈕。我現在使用後退按鈕的方式是onclick =「history.go（-1）。問題是我不能使用所有其他按鈕上的滑動，網站的其他部分工作正常，這是我必須控制的唯一的錯誤，你可以看看這裏的網站：www.gerardsteurvormgeving.nl

我使用的代碼的一部分（有一點叫做後臺按鈕的html 「terug」的onclick =「history.go（-1），你會本文根據查找的JavaScript。我希望有人能幫助我這個!!!!萬分感謝提前！

所有最優秀的，

傑拉德

<!-- 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？

這樣，後退按鈕就會像您期待的那樣工作。其他的技術，如你正在使用的技術也可以有一個解決方法，但如果你使用上面提到的歷史管理庫，它會更好。

這裏有一個working demo使用HTML5：

這沒有你想要的滑動效果，但會給你一個想法 :)

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> 

Javascript代碼

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); 
};