使用 # 时锚 <a> 标签在 chrome 中不起作用
Posted
技术标签:
【中文标题】使用 # 时锚 <a> 标签在 chrome 中不起作用【英文标题】：Anchor <a> tags not working in chrome when using # 【发布时间】：2016-11-30 00:16:12 【问题描述】：这是我在页面上使用的代码，
<li><a href="/explore/#Sound">Sound</a></li>
（在所有页面上出现的菜单中）
<a id="Sound"><a>
（在我要链接的页面上）
我尝试将内容添加到带有 id 的标签中。但只有在 chrome 中，浏览器才不会向下滚动到标签。这些锚点在 IE&FF 中工作 有什么想法吗？
【问题讨论】：
请问您有该页面的链接吗？ dev.phonaudio.com/explore/#Sound 需要认证。你能做一个 JSFiddle 吗？ 哦，当然是我的错，是的，我会的 虽然它在 jsfiddle 中不能正常工作，因为问题是当我从另一个页面转到这个页面时，如果我已经在页面上，# 工作 【参考方案1】：原来这是某些版本的 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);
);
【讨论】：
谢谢伙计，找到解决方案做得很好。终于到了！ 没问题！通常，消除过程会让您到达那里！ 感谢 @Jake_ 让我们知道这样的错误...:)
在 Google 跟踪代码管理器中也很有效。
这会影响浏览器的历史记录。我用window.location.replace(hash) 解决了这个问题。【参考方案2】：
发布的解决方法对我不起作用，但是经过几天的搜索后，它终于像魅力一样起作用了，所以我认为值得分享：
$(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;
);
);
【讨论】：
接受的答案对我不起作用，但这个答案对我有用。谢谢。 这应该是公认的答案。还修复了 Safari iosX 和 Mac OSX 上的相同问题【参考方案3】：如果您在发现指向 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)
, [])
【讨论】：
【参考方案4】：我也遇到了这个问题（使用链接进行相同的页面导航），解决方案非常简单（虽然很难弄清楚）。我希望这会有所帮助 - 我还检查了 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>
【讨论】：
天哪，我花了一整天的时间寻找解决方案，谢谢！！【参考方案5】：尝试使用： 对于菜单页
<li><a href="/explore/##Sound">Sound</a></li>
在所有页面上出现的菜单中
<a id="#Sound"><a>
这适用于所有版本的 Chrome！ 我已经在浏览器上测试过了。
【讨论】：
【参考方案6】：此答案适用于遇到相同问题但脚本不起作用的人。尝试从页面上的所有图像中删除loading='lazy' 和decoding='async' 或为它们设置width 和height 属性。
它对我来说就像一个魅力。
【讨论】：
删除 lasy-load 解决了这个问题，谢谢！【参考方案7】：这是我的@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);
);
【讨论】：
【参考方案8】：不确定这是否有帮助，但我意识到我在 IE 中的锚点工作正常，但在 Firefox 或 Chrome 中没有。我最终将 ## 添加到我的锚点中，这解决了问题。
示例： a href="##policy">目的和政策声明
而不是：
a href="#policy">目的和政策声明
【讨论】：
我试过了，点击时锚点不再做任何事情。【参考方案9】： <html>
<body>
<li>
<a href="#Sound">Sound</a>
</li>
<a id="Sound" href="www.google.com">I AM CALLED</a>
</body>
</html>
将其用作您的代码，它将调用带有 id 值声音的锚标记
【讨论】：
这是我已经拥有的，但由于 chrome 中的错误而无法正常工作，但谢谢 :)【参考方案10】：只需将链接上的调用更改为外部调用。
<a href="#nlink" class="external"> </a>
【讨论】：
以上是关于使用 # 时锚 <a> 标签在 chrome 中不起作用的主要内容，如果未能解决你的问题，请参考以下文章