javascript - 使用 jQuery 确定页面 anchor (#) 访问何时发生

Question

当用户使用 jQuery 单击特定链接并将它们滚动到页面上的 anchor 时，我目前正在拦截。页面滚动到 anchor 后，我想显示一个 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;
});

问题是当页面向上滚动到注册表单所在的 anchor 时，隐藏的 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() 回调函数应该能为您提供所需的东西。