Back Button Bug withjQuery hashchange事件和动画scrollTop

时间:2012-08-18 04:16:43

标签: jquery back-button scrolltop hashtag

我不确定这是一个错误还是编写它的方式,但任何帮助都很棒!!

我正在使用Ben Alman的jQuery hashchange事件,我在其他项目中使用了

使用fadeto动画进行操作并且没有任何问题。有了这个文件,我有一页

站点并使用scrollTop函数。后退按钮可以工作,但它只能工作一次

foward按钮根本不起作用,然后它来回跳跃但不动画。下面是

我现在拥有的东西。

CSS:

         <nav id="primary">
            <ul>
                <li>
                 <a href="#home">home</a>
                </li>
                <li>
                <a href="#about">about</a>
                </li>
                <li>
                <a href="#services">services</a>
                </li>
                <li>
                <a href="#contact">contact</a>
                </li>
            </ul>
       </nav>


        <div id="content">
            <article id="home">home</article>
            <article id="about">about</article>
            <article id="services">services</article>
            <article id="contact">contact</article>
        </div>

JQUERY:

    var href         = '';
    var easeDuration = 1000;
    var easeType     = "easeOutExpo";

    //Thumbanil click states/////
$('#primary ul').delegate('li', 'click', function (e) {
    e.preventDefault();
            var index = $(this).prevAll().length;
    href =  $('#primary ul li a:eq(' + index + ')').attr('href');
            $('html, body').animate({scrollTop: $(href).offset().top},{easing: easeType,duration: easeDuration,complete: function() { 
            window.location.hash = href;
            return false;
            }});
        });

    $(window).bind('hashchange', function(e){
                e.preventDefault();
                var newHash = window.location.hash.substring(1);
              $('html, body').animate({scrollTop: $("#"+newHash).offset().top}, {easing: easeType,duration: easeDuration,complete: function() { 
                return false;}});
  });
$(window).trigger('hashchange');

1 个答案:

答案 0 :(得分:0)

$(document).ready(function(){
var href         = '';
var easeDuration = 1000;
var easeType     = "easeOutExpo";
$(window).hashchange(function(){
//your code
});
});