Javascript jQuery scrollTop动画怪异且不可控

我正在尝试使用jQuery scrollTop动画滚动到特定目标。但出于某种原因，无论我使用什么样的放松方式，它都会开始非常缓慢，然后加速。它看起来非常奇怪和丑陋

此外，当id“Beauty target”位于屏幕顶部时，它会按计划停止id“Beauty target”，但当id“Fashion target”、“Artists target”和“Actors target”位于屏幕底部时，它会停止id“Beauty target”

要滚动，您需要单击“Preise”标题下的“Beauty”、“Fashion”、“Artists”或“Actors”svg。我用了Wordpress和twenty tweny主题。问题出现在以下网站：https:anna-samlidou.com/example

要滚动，我使用的功能与我一直使用的功能相同：

jQuery(document).ready(function(){
    jQuery('a[href^="#"]').on('click',function (e) {
        e.preventDefault();
    
        console.log("scroll function started");
    
        var target = this.hash;
        var $target = jQuery(target);
    
        jQuery('html, body').animate({
            'scrollTop': $target.offset().top
        }, 1000, 'swing', function () {
            console.log("scroll function finished");
            window.location.hash = target;
        });
    });
});

经过一些调查，我发现当我移除

<?php wp_head(); ?>

滚动到错误位置的问题是由于没有正确清除浮动而导致的，这样会弄乱结构。在每个部分后添加以下html代码解决了问题：

<br style="clear:both;>

---

我建议您将JQuery 3.5.1版本添加到
var j=JQuery.noConflict（）
；并调用
j（'a[href^=“#“]”）取而代之。Wordpress JQuery版本非常旧（1.12），混合使用时肯定会导致不兼容和问题

滚动到错误位置的问题是由于未正确清除
..
容器中的浮动元素造成的。第一个元素前面的DOM中没有浮动元素，因此正确计算了它的位置。由于
float:left；
float:left；
float:left；
float:left；>…
上的code>

清除的块将如下所示（不显示三列的内部内容）：

<div class="preise-kategorien-abschnitt">
    <h2 class="preise-kategorien-abschnitt-titel" id="Actors-Target">Actors Shootings</h2>
    <div class="preise-kategorien-abschnitt-preise-container">
      <div class="preise-kategorien-abschnitt-preise-karte preis-karte-links">...</div>

      <div class="preise-kategorien-abschnitt-preise-karte preis-karte-mitte">...</div>
      <div class="preise-kategorien-abschnitt-preise-karte preis-karte-rechts">...</div>
    </div>
    <br style="clear:both;>
</div>


演员枪击案
...
...
...
尝试在调用
.animate（）时将“swing”替换为“linear”
@Luke我已经做了，只是又做了一次。不过还是一样的动画。这解决了3个有问题的容器的错误定位问题！谢谢！但我仍然在为奇怪的动画绞尽脑汁。我在header.php文件的wp_head（）之后添加了以下代码调用：@AlphaLeviathan问题是您连接了两个单击侦听器，一个在第94行内联，另一个在第240行的“Anna_Samlidou_Vitals.js”中：-）@SachaM78我从“Anna_Samlidou_Vitals.js”文件中删除了代码。如果清除缓存，则会看到更新的文件。但是奇怪的动画仍然存在。非常好的一点，动画在Safari中也能工作。所以这很可能是一个Chrome问题。Firefox似乎很难处理所有svg文件，但我还没有研究跨浏览器兼容性。我最担心的是如何修复Google Chrome的动画：/@AlphaLeviathan发现了问题：CSS规则
滚动行为：平滑body{}
CSS中的code>会导致Chrome搞乱动画。只需删除该规则，动画在Chrome中也能正常工作。
html{scroll-behavior:unset;}

<br style="clear:both;>

<div class="preise-kategorien-abschnitt">
    <h2 class="preise-kategorien-abschnitt-titel" id="Actors-Target">Actors Shootings</h2>
    <div class="preise-kategorien-abschnitt-preise-container">
      <div class="preise-kategorien-abschnitt-preise-karte preis-karte-links">...</div>

      <div class="preise-kategorien-abschnitt-preise-karte preis-karte-mitte">...</div>
      <div class="preise-kategorien-abschnitt-preise-karte preis-karte-rechts">...</div>
    </div>
    <br style="clear:both;>
</div>