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

我正在构建一个逐步增强的引导式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来说明这个问题。复制

打开http://fiddle.jshell.net/jhfrench/HdCbu/7/show
然后调整浏览器窗口的大小，直到"PTO、AIT寿命、工作小时数"等堆叠在一起
单击右上角的按钮（有三个白色水平条的按钮）可以显示导航菜单
单击蓝色的"帮助"按钮执行显示/跳转到

作为最右边的div，它左边的所有内容都堆叠在上面，因此新"显示"的帮助区域通常位于页面的可见部分下方。

相关：

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

当我对我的浏览器Chrome 24完全按照你说的做（步骤1-4）时，你的JSFiddle确实会跳转。你的浏览器是什么？

但也许这是你的问题。如果我导航到http://fiddle.jshell.net/jhfrench/HdCbu/7/show/#help_area（注意附加的哈希标签）并执行步骤1-4，我的浏览器不会跳转。请注意，当您第一次导航到该URL时，没有可见的#help_area。因此，您导航到的URL指定了一个不可见的哈希标记。也许浏览器对此有点困惑，只是让#help_area散列标记处于错误状态。从那时起，它将不允许滚动到它，即使在它变为可见之后也是如此。猜测，但我希望它有帮助！

相关内容

最新更新

热门标签：