Question

我有一个跳转到html锚点的网页：

<a href="#target">Jump</a>
...
<a id="target">Target</a>

跳转工作正常，然后浏览器的地址栏显示“foo.html#target”。

每当我在具有:hover的元素上进一步向下转换时，会导致页面跳回到目标锚点。

我一直试图找出问题的确切位置，但我完全卡住了。

有没有人经历过这样的事情，并且知道可能导致这种行为的原因是什么？

请参阅以下代码段中的简化问题：

html, body {
    height:100%;
    overflow-y: auto;
}


#hoverx {
    margin-top: 200px;
    height: 100px;
    width: 100px;
    background-color: aqua;
    transition: all 2s;
}

#hoverx:hover {
    height: 200px;
    width: 200px;
    background-color: blueviolet;
}

<div style="height:500px;background-color:#FF0000;">
    <p>DIV1</p>
    <a href="#jump">JUMP</a>
</div>
        
<div style="height:500px;background-color:#00FF00;">
    <p>DIV2</p>
</div>
        
<div style="height:500px;background-color:#0000FF;">
    <p><a id="jump">DIV3</a></p>
</div>

<div style="height:500px;background-color:#FFFF00;"><p>DIV4</p>
    <div id="hoverx">foo</div>
</div>

Answer 1

由于它在Firefox中运行，并且只在Chrome中出现问题，导致了罪魁祸首。结果是缺少的CSS转换前缀：

-webkit-transition:

添加后，事情按预期工作。

任何CSS转换都会导致跳转到html锚点

1 个答案: