“跳过导航”链接无法在谷歌浏览器工作
我关注this page做出“跳过导航”链接,但它不适用于Chrome(5.0.375.127)。“跳过导航”链接无法在谷歌浏览器工作
当我标签并输入链接时,它会滚动到内容,但当我继续选项卡时,它从顶部开始,但不是从内容开始。
该页面的跳过“跳过导航”链接在Chrome中也不起作用。
这是Chrome的错误吗?任何解决方法?
我明白了。目标应该是一个可以聚焦的标签,如果没有,就是我的情况,应该将target的tabindex设置为-1。
我的jQuery的解决方案,ScrollTo plug-in是:
$("a[href^='#']")
.click(function(evt){
var j = $(evt.currentTarget);
var anchorTarget = j.attr("href");
$("body")
.scrollTo(anchorTarget, 500, {
onAfter:function() {
window.location.hash = anchorTarget.substr(1);
$(anchorTarget).attr("tabindex",-1).focus();
}
});
evt.preventDefault();
});
Chrome(Webkit)中存在一个已知的错误,它会阻止您向锚点滚动两次。 因此,如果您以前开启#anchor,向上滚动,并再次点击一个链接,并重新尝试#anchor,它将无法工作。
请参见:http://code.google.com/p/chromium/issues/detail?id=42511
我还没有尝试过,但如何使用JavaScript首先清除哈希什么? 像这样:
<a href="#content" onclick="location.hash='';">Scroll to content</a>
测试在Chrome下,它的工作原理:
<a href="#content" onclick="this.focus();">Scroll and tab</a>
我可以证实,安迪李的回答工作,但我并不需要的东西scrollTo。我也加入了一个钩子,这样如果你正在加载一个已经应用了锚链接的页面,就会给出合适的焦点。
我的版本是:
// Fixes anchor focus in Chrome/Safari/IE by setting the tabindex of the
// target container to -1 on click/enter
// see -> http://*.com/questions/3572843/skip-navigation-link-not-working-in-google-chrome/6188217#6188217
$("a[href^='#']").click(function(evt){
var anchortarget = $(this).attr("href");
$(anchortarget).attr("tabindex", -1).focus();
});
// Fixes anchor focus in Chrome/Safari/IE by setting the tabindex of the
// target container to -1 on page load
if (window.location.hash) {
$(window.location.hash).attr("tabindex", -1).focus();
}
这是我的解决方法。 它使键盘跳过导航链接到其页面上的任何元素ID。
<a href="#" onclick="goToId('target_anchor_id'); return false;">click to skip</a>
....
<h3 id="target_anchor_id">
链接的onclick
事件处理程序在这里。
function goToId(id) {
if (id) {
//make temporary 'a' element just before the anchor destination
var id_tmp = "___" + id;
var e = $("#" + id);
var e_tmp = $("#" + id_tmp);
if (e_tmp.length == 0) {
e.prepend("<a href='#' onclick='return false;' id='"+id_tmp+"'></a>");
e_tmp = $("#" + id_tmp);
} else {
e_tmp.attr("href","#");
}
// go give the focus to my temporary 'a' element
window.location.href = '#' + id_tmp;
// make the temporary focus invisible by removing 'href' attribute.
e_tmp.removeAttr("href");
}
}
以下是我的假设。
- 只有
a
链接href
属性可能是键盘导航锚链接的正确目的地。 - 即使我从重点
a
链接删除href
属性,浏览器仍然会记住键盘导航的焦点位置,同时它不会显示在屏幕上,聚焦标记了。
我写它为弹出页面跳过导航不可能被滚动。 我希望它甚至可以用于屏幕阅读器。
我知道这是一个古老的问题,但我终于在搜索了几个小时后偶然发现了它。我还没有找到一个非JS的解决方案,虽然这个问题在Chrome中被标记为固定,但它仍然表现出相同的行为。除此之外,我使用jQuery。我没有使用内联脚本,而是使用了不显眼的事件监听器。
的HTML:
<div id="skiptocontent">
<a href="#mainContent" id="skipper">Skip to Main Content</a>
</div>
<div id="mainContent"></div>
jQuery的:
$(document).ready(function() {
$("#skipper").click(function() {
$('#mainContent').attr('tabIndex', -1).focus();
});
});
我也隐藏链接,除非它获得焦点从键盘。这样,只有键盘用户和屏幕阅读器才会知道链接在那里。使用CSS3,你可以确保如果用户快速通过它,它会变得简单可见。
的CSS:
#skiptocontent a {
position: absolute;
top:-40px;
left:0px;
background:transparent;
-webkit-transition: top 1s ease-out, background 1s linear;
transition: top 1s ease-out, background 1s linear;
z-index: 100
}
#skiptocontent a:focus {
position:absolute;
left:0px;
top:0px;
background:#F1B82D;
-webkit-transition: top .1s ease-in, background .5s linear;
transition: top .1s ease-in, background .5s linear
}
对于演示,您可以查看fiddle。如果有人有办法使用JavaScript,我很乐意听到它。如果它需要js,我认为解决方案不是真正可访问的。
这里是没有jQuery的同样的解决方案。
添加页面的锚:
<div class="skip-nav">
<a href="#content">Skip to content</a>
</div>
链接到内容:
<section id="content" tabindex="-1">
Lorem ipsum...
</section>
的问题是Tab键的顺序。为了滚动,我已经用JS修复了它。不管怎么说,还是要谢谢你! – 2010-08-26 07:52:32
'tabbing'是什么意思? – Lekensteyn 2010-08-26 09:06:55
按Tab键浏览链接,通过按“Tab”键进行键盘导航。 – 2010-08-26 09:25:55