在不使用锚点的情况下创建指向网页顶部的链接答案

【问题标题】：Create a Link to the Top of a Web Page Without Using Anchors在不使用锚点的情况下创建指向网页顶部的链接
【发布时间】：2012-08-01 00:14:35
【问题描述】：

我有一个 HTML 文档，目前有一些使用锚点指向页面顶部的链接

<body id="topofpage">
   ...
   <a href="#topofpage">Go to top</a>

但是，我不喜欢创建一个无用的 id 以及单击链接后“#topofpage”如何显示在 URL 中。在不使用 Javascript 的情况下，我还能做些什么来链接到页面顶部？我尝试使用 <a href=""> 完全删除锚点，但这会导致页面刷新。

【问题讨论】：

标签： html anchor

【解决方案1】：

According to the HTML5 指定空片段# 和特殊片段#top 将链接到页面顶部。

<a href="#">Go to top</a>

<a href="#top">Go to top</a>

如果您使用这些特殊的片段名称，则无需创建匹配的锚点。

【讨论】：

HTML5 规范定义了一个特殊的片段“#top”，可用于链接到文档的顶部。无需显式定义 ID 为“top”的元素。请参阅 Mozilla 的href note。
这个答案确实回答了原始问题，但它对可访问性产生了负面影响。如果您选择这些链接中的任何一个并在下一次您的标签时按 Enter 键，您将转到返回顶部链接之后的链接。然而，如果您使用原始问题中的标记，则制表符将继续指向目标元素之后的链接。出于这个原因，我建议使用原始问题中的标记。
@Votemike 确定这是浏览器中的可访问性错误吗？

【解决方案2】：

你可以尝试使用javascript

<a onclick="scroll(0,0)">

或者你可以使用 jQuery

$("#Top").click(function(){
 scroll(0,0);
});

【讨论】：

如果我这样做，如果我点击带有“在新选项卡中打开”的链接，它会失败。像这样使用Javascript真的是唯一的方法吗？还有，滚动功能是跨浏览器的吗？
我希望这样做，但我认为这不适用于所有浏览器：developer.mozilla.org/en-US/docs/Web/API/Window/…

【解决方案3】：

我知道你说过不使用 JavaScript，但我认为这确实是避免使用真正锚的唯一方法。以下 jQuery 将用#top href 替换锚点，并在不更改 URL 的情况下执行漂亮的动画滚动到顶部（有关更多信息，请参阅original author 的页面）。

$(document).ready(function() {
    $('a[href=#top]').click(function(){
        $('html, body').animate({scrollTop:0}, 'slow');
        return false;
    });
})

jsfiddle for completeness

但是，我会坚持使用 semantic HTML 并使用锚点来实现它们的目的，以便最大数量的浏览器可以解释正确的含义。不要忘记需要屏幕阅读器或其他特殊浏览器的残障人士。锚点保证工作。

除此之外，Google announced in 2009 还提供了一些新的索引功能，这些功能直接利用页内锚点来提供网络搜索者可能正在寻找的额外上下文。在许多情况下，用户可能对页面的某个部分非常感兴趣。Google 可以提供指向该页面锚点的直接链接以获得最佳相关性。

从我的角度来看，底线 - 不要取消锚点。使用它们。

【讨论】：

【解决方案4】：

另一种使用锚标记获取页面顶部的有用方法是

<a href='#top'> Go back to the top of the page.</a>

这样使用它会使您的页面自动滚动到当前页面的顶部。希望这对某人有用。

【讨论】：

【解决方案5】：

<a href="?">top</a> 会带你到那里。

【讨论】：