Question

我的水平网页上有一个后退按钮。我现在使用backbutton的方式是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？

这样，后退按钮就会像你期望的那样工作。您正在使用的其他技术也可以有一个解决方法，但如果您使用上述历史管理库，它仍然会更好。

这里是使用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);
};

在动画.scrollleft中使用history.back

1 个答案: