如何在页面底部显示一个div，然后跳到它？

Question

我正在构建一个逐步增强，引导编辑的web应用程序，它在每个页面上都有以任务为中心的帮助的特性。帮助区域div (id="help_area")以隐藏状态加载；通常当用户单击“帮助”按钮(a id="nav_help_button")时，主内容div从span12压缩到span9，帮助区域被显示为span3。这个效果很好。

因为我想支持移动和平板电脑，所以我使用Bootstrap的响应式脚手架。因此，如果您在狭窄的视图端口上查看页面，请单击“帮助”按钮“显示”页面‡底部的隐藏帮助区域。我试图使用jQuery的.slideToggle()回调方法来执行JavaScript (window.location.hash = "help_area";)，该方法在帮助区域被显示后“跳转到”帮助区域，但在跳转方面没有任何进展(它没有错误；它只是没有将浏览器焦点移动到帮助区域)。

如何在页面底部显示一个div，然后跳转到它？，我也在使用preventDefault，这样浏览器就不会试图在目标被显示之前跳转到内部链接。这可能是冲突吗？

下面是相关的ECMA脚本：

$('#nav_help_button').click(function(event) {
    "use strict"; //let's avoid tom-foolery in this function
    event.preventDefault(); //don't let a tag try to jump us to #help_area before we reveal it
    //adjust spans of main block and help area, set aria-hidden attribute on help block to help screen-readers
    if ( $('#help_area').attr('aria-hidden')==='true' ) {
        $('#content_container.span12').switchClass('span12', 'span9', 300);
        $('#help_area').delay(300).slideToggle(300, function() { window.location.hash = "help_area"; }).attr('aria-hidden', 'false');   
    }
    else {
        $('#help_area').slideToggle(300).attr('aria-hidden', 'true');
        $('#content_container.span9').delay(300).switchClass('span9', 'span12', 300);
    }
});

我还设立了一个说明这个问题的JSFiddle。复制

1. 开放http://fiddle.jshell.net/jhfrench/HdCbu/7/show
2. 然后调整浏览器窗口的大小，直到"PTO，AIT，时数“等堆叠在一起
3. 单击右上角的按钮(有三个白色水平条的按钮)显示导航菜单。
4. 单击蓝色“帮助”按钮以执行“显示/跳转到”。

‡作为最右边的div，它左边的所有东西都堆放在顶部，所以新“显示”的帮助区域通常在页面可见部分下面。

相关信息：

• 使页面跳转到特定位置的Javascript
• http://api.jquery.com/event.preventDefault/
• http://api.jquery.com/slideToggle/

Answer 1

当我对我的浏览器(即Chrome 24 )说的(步骤1-4)时，你的JSFiddle确实会跳转。你的浏览器是什么？

但也许这是你的问题。如果我导航到区域 (请注意附加的哈希标记)并执行步骤1-4，我的浏览器不会跳转。注意，当您第一次导航到该URL时，没有可见的#help_area。因此，您要导航到的URL指定一个不可见的散列标记。也许浏览器对此有点困惑，只会让#help_area哈希标签处于糟糕的状态。它将不允许从那时起滚动到它，即使在它变得可见之后。猜测，但我希望这是有帮助的！