如何修复仅在第二次点击时触发的jQuery函数？

Question

我有一个jQuery函数，当您单击相关菜单列表项<a/>标记时，它会滚动到HTML id。问题是，仅当您第二次单击时，代码才会触发。

有什么想法吗？

下面是代码示例：

$(function() {
  // Desired offset, in pixels
  var offset = -87;
  // Desired time to scroll, in milliseconds
  var scrollTime = 500;

  $('#topnav a').click(function() {
    // Need both `html` and `body` for full browser support
    $("html, body").animate({
      scrollTop: $($(this).attr("href")).offset().top + offset
    }, scrollTime);

    // Prevent the jump/flash
    return false;
  });
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="topnav">
  <ul>
    <li><a href="#trustpilot">Our reviews</a></li>
    <li><a href="#about">About us</a></li>
    <li><a href="#what-our-customers-say">What our customers say</a></li>
    <li><a href="#policy">Why check your policy</a></li>
    <li><a class="orange-btn" href="#contact">Book today</a></li>
  </ul>
</div>
<section id="trustpilot">
  <div class="container">
    <div class="row">
      <div class="col-12">
      </div>
    </div>
  </div>
</section>

谢谢