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

我正在构建一个progressively-enhanced,Bootstrap ed网页应用程序，每页上都有task-centric help。帮助区div（id="help_area"）加载处于隐藏状态;通常当用户点击“帮助”按钮（a id="nav_help_button"）时，主内容div从span12缩小到span9，帮助区域显示为span3。这很好。如何在页面底部显示div，然后跳转到该页面？

因为我想支持手机和平板电脑，所以我使用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); 
    } 
});

我还建立了a JSFiddle that illustrates the problem。要复制

开放http://fiddle.jshell.net/jhfrench/HdCbu/7/show
然后调整该浏览器窗口，直到上的按钮在右上角“PTO，AIT生活，工作小时数”，对方
点击顶部等堆（带有三个白色水平条的那个）来显示导航菜单
点击蓝色的“帮助”按钮来执行显示/跳转。

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

相关：

来源

2013-02-08 Jeromy French

Offtopic：请！请不要在导航中使用touchstart！ – yckart 2013-02-09 00:11:03

你可以试试'$（“＃help_area”）。focus（）;'？ – Kaeros 2013-02-09 00:11:31

似乎在Chrome中正常工作。蓝色的帮助框显示在底部，浏览器跳到它。 – Malk 2013-02-09 00:18:15

你的jsfiddle不跳的时候我做的正是像你说的（步骤1-4），我的浏览器，这是Chrome 24.你的浏览器是什么？

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

来源

2013-02-09 00:33:25

无论如何，Waterfox 18.0.1都会这样做。 – 2013-02-09 00:43:24

我刚刚在Windows 7上试过Waterfox 18.0.1，它对我来说工作得很好。对两件事情要非常小心。首先，导航到没有#help_area哈希标记的网址。其次，请注意，如果您反复点击“帮助”按钮，它将只会每隔滚动。这没有什么神秘的。帮助按钮切换#help_area div的可见性。当它消失时，'window.location.hash ='help_area''这行不做任何事情。再次单击它，使div出现，并正确跳转。帮助按钮是否应该切换帮助区域是另一回事！ – 2013-02-09 03:49:16

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

回答

相关问题