jQuery scrollTop 动画怪异且无法控制的缓动

Question

我正在尝试使用 jQuery scrollTop 动画滚动到特定目标。但由于某种原因，无论我使用什么缓动，它开始时非常缓慢，然后加速。它只是看起来非常奇怪和丑陋。

此外，它会在屏幕顶部停止 id "Beauty-target"，但会在 "Fashion-target" 、 "Artists-target" 和 "Actors-target" 位于屏幕顶部时停止屏幕底部。

要滚动，您需要点击“Preise”横幅下的“美女”、“时尚”、“艺术家”或“演员”svg。我使用了 Wordpress 和 220 主题。问题出现在以下网站：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(); ?>

从 header.php 文件中，滚动按预期工作。此外，该网站看起来很破旧。 所以我用了

<?php wp_deregister_script('jquery'); ?>

只删除 jQuery。这没有相同的效果，滚动仍然是错误的。 我还安装了插件“Remove jQuery Migrate”，但也没有用。

那么 wp_head() 函数的哪一部分导致了这个问题？或者我还能如何解决这个滚动问题？

提前致以最诚挚的问候和感谢， 阿尔法利维坦

如何解决：谢谢@SaschaM78

为了解决奇怪动画的问题，我添加了带有 noConflict() 的 jQuery，如下所示：

<?php wp_head(); ?>
<script type="text/javascript" src="https://anna-samlidou.com/wp-content/uploads/jquery/jquery-3.5.1.min.js"></script>
<script>
        var j = jQuery.noConflict();
        j(document).ready(function(){
            j('a[href^="#"]').on('click',function (e) {
                e.preventDefault();

                console.log("scroll function started");

                var target = this.hash;
                var $target = j(target);

                j('html, body').animate({
                    'scrollTop': $target.offset().top
                }, 1000, 'easeInOutQuad', function () {
                    console.log("scroll function finished");
                    window.location.hash = target;
                });
            });
        });
    </script>

在 Safari 和 Firefox 中这工作正常，但要使其在 Google Chrome 中工作，我必须取消设置 html 的滚动行为，因为它与动画冲突。

html{scroll-behavior:unset;}

滚动到错误位置的问题是由于没有正确清除浮动造成的，因此会破坏结构。在每个部分之后添加以下 html 代码即可解决问题：

<br style="clear:both;>

所有学分都归@SaschaM78

Answer 1

我建议使用var j = jQuery.noConflict() 添加您的 JQuery 3.5.1 版本；而是打电话给j('a[href^="#"]').on('click', ...);。 Wordpress JQuery 版本真的很旧（1.12），这肯定会导致不兼容和混合时出现问题。

滚动到错误位置的问题是由于未正确清除 <div class="preise-kategorien-abschnitt">...</div> 容器中的浮动元素造成的。第一个元素在它前面的 DOM 中没有浮动元素，因此它的位置是正确计算的。由于<div class="preise-kategorien-abschnitt-preise-karte ...">...</div> 上的float:left; 未被清除，因此该标题后面的所有标题的位置都会不正确。

清除的块看起来像这样（不显示三列的内部包含：

<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>