アニメーション化された.scrollleftのhistory.backの使用

Question

私は水平のウェブページ上に戻るボタンで苦労しています。私が現時点でバックボタンを使用する方法は、onclick = "history.go（-1）です。問題は、他のすべてのボタンで行われているスライドを使用できないということです。これは私が制御下になければならない唯一のバグです。ここでウェブサイトをご覧ください：www.gerardsteurvormgeving.nl

私が使用するコードの一部です。 "テルグ" 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などの履歴管理を追加しませんか？

このように、戻るボタンは期待通りに機能します。あなたが使っているもののような他のテクニックにも回避策がありますが、上記のような履歴管理ライブラリを使用すればさらに良い方法です。ここで

は、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> 

を与えます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); 
};