Question

当用户点击jQuery的特定链接并将其滚动到页面上的锚点时，我正在拦截。一旦页面滚动到锚点，我就想显示一个div并关注该div中的元素。以下代码执行此操作但有问题...

// Intercept the click on the link which scrolls to the signup form
$('#section-footer-buttons a').click(function(){
    // Scroll to the welcome section
    location.href = '#welcome';

    // Show the hidden signup form if it's not already visible
    $('#signup-form').slideDown(350, function(){
        // Focus on the first element on the form now the animation is complete
        $('#signup-form :input:enabled:visible:first').focus();
    });

    // We've handled this click so return false
        return false;
});

问题是，当页面滚动到注册表单所在的锚点时，隐藏的div已经可见而没有好的slideDown动画。有没有办法只在页面停止滚动后才开始播放slideDown动画？基本上，我需要从location.href完成时回调。

Answer 1

你应该采取不同的方式。

$('#section-footer-buttons a').click(function(){
    var welcome = '#welcome',
        $offset = $('[href="'+welcome+'"]').offset().top;

    $('html,body').animate({
        scrollTop:$offset,350
    },function(){
        location.href = welcome;

        $('#signup-form').slideDown(350, function(){
            $(this).find('input').filter(':enabled:visible').first().focus();
        });
    });

    return false;
});

使用这样的.animate()回调函数应该可以为您提供所需的内容。

使用jQuery确定何时访问页锚（＃）

1 个答案: