javascript - 动画滚动第一次不工作

Question

Here is my fiddle:

jQuery(document).ready(function(){
    $('ul.subMenu li a').click(function(){
        jQuery('ul.subMenu li a.curM').removeClass('curM');
        jQuery(this).addClass('curM');

        var target = $(this).attr('href');

        var getHeaderHeight = jQuery(".header_wrap.fixed_nav_menu").outerHeight();
        $('html, body').stop().animate({'scrollTop': $(target).offset().top - getHeaderHeight}, 'fast', 'swing'); 


    });

    jQuery(window).scroll(function() {                
        jQuery('.header_wrap').addClass('fixed_nav_menu');
        if (jQuery(document).scrollTop() == 0) {
            jQuery('.header_wrap').removeClass('fixed_nav_menu');   
        }
    });

});

首先当您点击例如“团队”时，它不会滚动到相应的部分，但是当您第二次点击时它会滚动到相应的部分。

Answer 1

使用这个。 http://jsfiddle.net/sherali/NXzcx/204/

已编辑:代码已优化。

每次在您的代码中定义的一些值。这不是最佳方式。

//you should define first time
var headerWrap = jQuery(".header_wrap"),
    getHeaderHeight = jQuery(".header_wrap").outerHeight(),
    fixedNavMenu = "fixed_nav_menu";


$('ul.subMenu li a').click(function () {
    jQuery(this).addClass('curM')
        .parent().siblings()
        .children().removeClass('curM');

    var target = $(this).attr('href'),
        offsetTop = $(target).offset().top - (headerWrap.is('.' + fixedNavMenu) ? getHeaderHeight : 2 * getHeaderHeight);

    $('html, body')
        .stop()
        .animate({'scrollTop': offsetTop}, 'fast', 'swing');
});

jQuery(window).scroll(function () {
    headerWrap.addClass(fixedNavMenu);
    if (jQuery(document).scrollTop() == 0) {
        headerWrap.removeClass(fixedNavMenu);
    }
});