这是我在页面上使用的代码，
<li><a href="/explore/#Sound">Sound</a></li>
（在所有页面上出现的菜单中）
<a id="Sound"><a>
（在我要链接的页面上）
我尝试将内容添加到带有 id 的标签中。但只有在 chrome 中，浏览器才不会向下滚动到标签。这些锚点在 IE&FF 中工作 有什么想法吗？
【问题讨论】：
标签： html google-chrome cross-browser
原来这是某些版本的 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);
}
});
【讨论】：
:)
window.location.replace(hash) 解决了这个问题。
发布的解决方法对我不起作用，但是经过几天的搜索后，它终于像魅力一样起作用了，所以我认为值得分享：
$(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;
}
}
});
});
【讨论】：
如果您在发现指向 SPA 站点的锚链接无法从外部站点运行时，不知何故像我一样来到这里。是的，浏览器工作太快而无法加载页面的骨架。并且在加载页面时找不到您的锚点。
要解决这个问题，只需在 SPA 的生命周期（React 中的 useEffect 和 Vue 中的 mounted）中添加一些行来检查 url 哈希并自己进行滚动。
使用 React 的示例
useEffect(()=> {
if(document.location.hash === '#some-anchor') {
setTimeout(()=> {
document
.querySelector("#some-anchor")
.scrollIntoView({ behavior: "smooth", block: "start" })
}, 300)
}
}, [])
【讨论】：
我也遇到了这个问题（使用链接进行相同的页面导航），解决方案非常简单（虽然很难弄清楚）。我希望这会有所帮助 - 我还检查了 IE、Firefox 和 Chrome，并且它全面运行（截至 2019 年 5 月 22 日）。
您的链接应如下所示：
<a href="pagename.html##anchorname">Word as link you want people to click</a>
你的锚应该是这样的：
<a name="#anchorname">Spot you want to appear at top of page once link is clicked</a>
【讨论】：
尝试使用： 对于菜单页
<li><a href="/explore/##Sound">Sound</a></li>
在所有页面上出现的菜单中
<a id="#Sound"><a>
这适用于所有版本的 Chrome！
我已经在浏览器上测试过了。
【讨论】：
此答案适用于遇到相同问题但脚本不起作用的人。尝试从页面上的所有图像中删除loading='lazy' 和decoding='async' 或为它们设置width 和height 属性。
它对我来说就像一个魅力。
【讨论】：
这是我的@Jake_ 答案版本，用于 Chrome / angular 在使用 ui-router 加载初始页面时未滚动到正确的锚点（原始答案会将我的代码抛出“过渡替代”异常）：
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});
});
【讨论】：
不确定这是否有帮助，但我意识到我在 IE 中的锚点工作正常，但在 Firefox 或 Chrome 中没有。我最终将 ## 添加到我的锚点中，这解决了问题。
示例： a href="##policy">目的和政策声明
而不是：
a href="#policy">目的和政策声明
【讨论】：
<html>
<body>
<li>
<a href="#Sound">Sound</a>
</li>
<a id="Sound" href="www.google.com">I AM CALLED</a>
</body>
</html>
将其用作您的代码，它将调用带有 id 值声音的锚标记
【讨论】：
只需将链接上的调用更改为外部调用。
<a href="#nlink" class="external"> </a>
【讨论】：