Html 使用 # 时锚 <a> 标签在 chrome 中不起作用
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/38588346/
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
Anchor <a> tags not working in chrome when using #
提问by Jake_
Here is the code I am using on my page,
这是我在页面上使用的代码，
<li><a href="/explore/#Sound">Sound</a></li>
(in a menu which appears on all pages)
（在出现在所有页面上的菜单中）
<a id="Sound"><a>
(on the page where i want to link to)
（在我想链接到的页面上）
I have tried adding content to the tags with an id. But only in chrome the browser will not scroll down to the tag. These anchors work in IE&FF Any ideas?
我尝试将内容添加到带有 id 的标签中。但只有在 chrome 中，浏览器才不会向下滚动到标签。这些锚在 IE&FF 中工作有任何想法吗？
回答by Jake_
Turns out this was a bug in certain versions of chrome, posting workaround for anyone who needs it! :)
原来这是某些版本的 chrome 中的一个错误，为任何需要它的人发布解决方法！:)
$(document).ready(function () {
var isChrome = /Chrome/.test(navigator.userAgent) && /Google Inc/.test(navigator.vendor);
if (window.location.hash && isChrome) {
setTimeout(function () {
var hash = window.location.hash;
window.location.hash = "";
window.location.hash = hash;
}, 300);
}
});
回答by Doug Edge
The workaround posted didn't work for me, however after days of searching this finally worked like a charm so I figured it was worth sharing:
发布的解决方法对我不起作用，但是经过几天的搜索，这终于像魅力一样奏效，所以我认为值得分享：
$(function() {
$('a[href*="#"]:not([href="#"])').click(function() {
if (location.pathname.replace(/^\//,'') == this.pathname.replace(/^\//,'') && location.hostname == this.hostname) {
var target = $(this.hash);
target = target.length ? target : $('[name=' + this.hash.slice(1) +']');
if (target.length) {
$('html, body').animate({
scrollTop: target.offset().top
}, 1000);
return false;
}
}
});
});
回答by Vishant Vadher
Try using : For menu page
尝试使用：对于菜单页面
<li><a href="/explore/##Sound">Sound</a></li>
in a menu which appears on all pages
在出现在所有页面上的菜单中
<a id="#Sound"><a>
This works well in the all versions of Chrome!
I have tested it on my browser.
这适用于所有版本的 Chrome！
我已经在我的浏览器上测试过了。
回答by Maksym
Here is my version of @Jake_ answer for Chrome / angular not scrolling to a correct anchor on initial page load up using ui-router (the original answer would throw my code into 'Transition superseeded' exceptions):
这是我的 @Jake_ 版本的 Chrome / angular 在使用 ui-router 加载初始页面时没有滚动到正确的锚点的版本（原始答案会将我的代码放入“Transition superseed”异常中）：
angular.module('myapp').run(function($transitions, $state, $document, $timeout) {
var finishHook = $transitions.onSuccess({}, function() { // Wait for the complete routing path to settle
$document.ready(function() { // On DOM ready - check whether we have an anchor and Chrome
var hash;
var params;
var isChrome = /Chrome/.test(navigator.userAgent) && /Google Inc/.test(navigator.vendor);
finishHook(); // Deregister the hook; the problem happens only on initial load
if ('#' in $state.params && isChrome) {
hash = $state.params['#']; // Save the anchor
params = _.omit($state.params, ['id', '#']);
$timeout(function() {
// Transition to the no-anchor state
$state.go('.', params, { reload: false, notify: false, location: 'replace' });
$timeout(function() {
// Transition back to anchor again
$state.go('.', _.assign($state.params, { '#': hash }), { reload: false, notify: false, location: 'replace' });
}, 0);
}, 0);
}
});
}, {invokeLimit: 1});
});
回答by dan harner
Not sure if this helps at all or not, but I realized my anchors in IE were working but not in Firefox or Chrome. I ended up adding ## to my anchors and this solved the issue.
不确定这是否有帮助，但我意识到我在 IE 中的锚点可以正常工作，但在 Firefox 或 Chrome 中却没有。我最终将 ## 添加到我的锚点，这解决了问题。
example: a href="##policy">Purpose and Policy Statement
示例：href="##policy">目的和政策声明
instead of :
代替 ：
a href="#policy">Purpose and Policy Statement
a href="#policy">目的和政策声明
回答by Brister Productions
I was having this problem as well (same page navigation using links) and the solution was very easy (though frustrating to figure out). I hope this helps - also I checked IE, Firefox, and Chrome and it worked across the board (as of 05-22-2019).
我也遇到了这个问题（使用链接进行同一页面导航）并且解决方案非常简单（尽管弄清楚令人沮丧）。我希望这会有所帮助 - 我还检查了 IE、Firefox 和 Chrome，并且它全面运行（截至 2019 年 5 月 22 日）。
Your link should looks like this:
您的链接应如下所示：
<a href="pagename.html##anchorname">Word as link you want people to click</a>
and your anchor should look like this:
你的锚应该是这样的：
<a name="#anchorname">Spot you want to appear at top of page once link is clicked</a>
回答by sumit bhatt
<html>
<body>
<li>
<a href="#Sound">Sound</a>
</li>
<a id="Sound" href="www.google.com">I AM CALLED</a>
</body>
</html>
use this as your code it will call the anchor tag with id value sound
将此用作您的代码，它将调用带有 id 值 sound 的锚标记
回答by Michael Tutino
Simply change the call on your link to external.
只需将链接上的呼叫更改为外部。
<a href="#nlink" class="external"> </a>
