Html 在不使用锚点的情况下创建指向网页顶部的链接
声明:本页面是StackOverFlow热门问题的中英对照翻译,遵循CC BY-SA 4.0协议,如果您需要使用它,必须同样遵循CC BY-SA许可,注明原文地址和作者信息,同时你必须将它归于原作者(不是我):StackOverFlow
原文地址: http://stackoverflow.com/questions/11750862/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Create a Link to the Top of a Web Page Without Using Anchors
提问by hugomg
I have an HTML document that currently has some links to the top of the page using an anchor
我有一个 HTML 文档,目前有一些使用锚点指向页面顶部的链接
<body id="topofpage">
...
<a href="#topofpage">Go to top</a>
However, I don't like needing to create a useless id and how the "#topofpage" shows up in the URL after I click the link. Is there something else I can do to link to the top of the page without using Javascript? I tried removing the anchor completely with <a href="">
but that causes the page to refresh.
但是,我不喜欢需要创建一个无用的 id 以及单击链接后“#topofpage”如何显示在 URL 中。在不使用 Javascript 的情况下,我还能做些什么来链接到页面顶部?我尝试完全删除锚点,<a href="">
但这会导致页面刷新。
回答by hugomg
According to the HTML5spec the empty fragment #
and the special fragment #top
will link to the top of the page.
根据 HTML5规范,空片段#
和特殊片段#top
将链接到页面顶部。
<a href="#">Go to top</a>
<a href="#top">Go to top</a>
There is no need to create a matching anchor if you use these special fragment names.
如果您使用这些特殊片段名称,则无需创建匹配的锚点。
回答by user1513192
You can try using javascript
您可以尝试使用 javascript
<a onclick="scroll(0,0)">
<a onclick="scroll(0,0)">
Or you can use jQuery
或者你可以使用 jQuery
$("#Top").click(function(){
scroll(0,0);
});
回答by Sumo
I know that you said without using JavaScript, but I think that is really the only way to avoid using a real anchor. The following jQuery will replace anchors with the #top
href and perform a nice animated scroll to the top without the URL changing (see the original author's page for more info).
我知道你说没有使用 JavaScript,但我认为这确实是避免使用真正锚点的唯一方法。下面的 jQuery 将用#top
href替换锚点,并在不更改 URL 的情况下执行漂亮的动画滚动到顶部(有关更多信息,请参阅原作者的页面)。
$(document).ready(function() {
$('a[href=#top]').click(function(){
$('html, body').animate({scrollTop:0}, 'slow');
return false;
});
})
However, I would stick with semantic HTMLand use anchors for their purpose so that the proper meaning can be interpreted by the maximum number of browsers. Don't forget about people with disabilities that require screen readers or other special browsers. Anchors are guaranteed to work.
但是,我会坚持使用语义 HTML并出于其目的使用锚点,以便最大数量的浏览器可以解释正确的含义。不要忘记需要屏幕阅读器或其他特殊浏览器的残障人士。锚保证工作。
In addition to that, Google announced in 2009some new indexing features that directly take advantage of in-page anchors to provide additional context that the Web searcher might be looking for. In many cases, there might be a section of a page that a user is very interested in. Google can provide a direct link to that anchor of the page for optimum relevance.
除此之外,谷歌在 2009 年宣布了一些新的索引功能,这些功能直接利用页面内锚点来提供网络搜索者可能正在寻找的额外上下文。在许多情况下,可能存在用户非常感兴趣的页面部分。Google 可以提供指向该页面锚点的直接链接以获得最佳相关性。
Bottom line from my point of view - don't dis the anchors. Use them.
从我的角度来看,底线 - 不要贬低锚点。使用它们。
回答by Vash
Another useful way of using the anchor tag to get the top of the page is
使用锚标记获取页面顶部的另一种有用方法是
<a href='#top'> Go back to the top of the page.</a>
using it like this makes your page automatically scroll to the top of the current page. Hope this is useful to someone.
像这样使用它会使您的页面自动滚动到当前页面的顶部。希望这对某人有用。
回答by Bret A. Lucas
<a href="?">top</a>
will get you there.
<a href="?">top</a>
会带你到那里。