javascript - jQuery animatescrollTop 不会在任何浏览器上滚动

Question

我正在制作一个网站，当用户单击导航栏的某种按钮时，整个网页应滚动到包含用户选择的信息的部分。但由于某种原因它根本行不通。以前是这样，但是有东西坏了。

导航栏代码:

<ul id="outJS">
 <li>
   <a href="#section0"> Infomratica </a>
 </li>
</ul>

部分代码:

<section id="section0" class="sezione0">
    <div class="container-fluid" style="text-align: center;">
        <div id="heading" class="row" style="margin-top: 125px;">
            <div class="col-md" style="margin-bottom: 80px;">Infomatica</div>
        </div>
        <div class="row justify-content-center">
            <div class="button" id="button-3">
                <div id="circle"></div><a>Infomatica</a>
            </div>
        </div>
    </div>
</section>

提供滚动功能的代码是这样的:

$('a[href*="#"]').on("click", function (e) {

        e.preventDefault();

        let target = $($(this).attr("href"));
        console.log(target.length);


        if (target.length) {
          $('html, body').animate({
            scrollTop: $(target).offset().top
          }, 1000);
        }



      });

我已经尝试了所有的可能性，但没有一个起作用。

您知道造成此问题的原因以及如何解决吗？

编辑:

我已经导入了 jQuery

Answer 1

您的起始 anchor 标记似乎缺少 >。应该是:

<a href="#section0">Informatica</a>

下面的工作示例:

$('a[href*="#"]').on("click", function(e) {
  e.preventDefault();
  let target = $($(this).attr("href"));
  if (target.length) {
    $('html, body').animate({
      scrollTop: $(target).offset().top
    }, 1000);
  }
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<ul id="outJS">
 <li>
   <a href="#section0">Informatica</a>
 </li>
</ul>

<section id="section0" class="sezione0">
  <div class="container-fluid" style="text-align: center;">
    <div id="heading" class="row" style="margin-top: 125px;">
      <div class="col-md" style="margin-bottom: 80px;">Informatica</div>
    </div>
    <div class="row justify-content-center">
      <div class="button" id="button-3">
        <div id="circle"></div><a>Informatica</a>
      </div>
    </div>
  </div>
</section>