javascript - jQuery scrollTop 第一次不滚动

Question

我尝试在代码末尾使用 e.preventDefault(); 和 return false; 但没有用。这是我的代码:

$('.game-nav-inner-game1 .nav-item a').click(function (){
    $('html,body').animate({
        scrollTop: $(".scrollHere").offset().top - 100
    }, 400);
});

这是我的 html:

<ul class="nav nav-tabs game-nav game-nav-inner game-nav-inner-game1-events" data-game="game1" data-container="events-container">
<li class="nav-item">
    <a class="nav-link" href="#nameofthemap" data-toggle="tab" aria-controls="nameofthemap">
        <img src="{$smarty.const.SITE_ADDR}/resources/img/game1-game/maps/nameofthemap.jpg" class="img-fluid game1-map" />
    </a>
</li>
</ul>
<div class="tab-content w-100">
   <div class="tab-pane fade scrollHere" id="events-container"></div>
</div>

如果你能帮助我，我将不胜感激。

Answer 1

根据您发布的代码，我添加了一个带有 game-nav-inner-game1 类的包装器 div，因为您确认它应该存在。

还有一些“间隔”div...

$('.game-nav-inner-game1 .nav-item a').click(function (){
    $('html,body').animate({
        scrollTop: $(".scrollHere").offset().top - 100
    }, 400);
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<div class="game-nav-inner-game1">
  <ul class="nav nav-tabs game-nav game-nav-inner game-nav-inner-game1-events" data-game="game1" data-container="events-container">
    <li class="nav-item">
      <a class="nav-link" href="#nameofthemap" data-toggle="tab" aria-controls="nameofthemap">
        <img src="{$smarty.const.SITE_ADDR}/resources/img/game1-game/maps/nameofthemap.jpg" class="img-fluid game1-map" />
      </a>
    </li>
  </ul>
</div>

<div style="height:150em;"></div>

<div class="tab-content w-100">
 <div class="tab-pane fade scrollHere" id="events-container">HERE</div>
</div>

<div style="height:150em;"></div>

运行代码片段...您会发现它实际上正在运行。所以你的问题出在选择器上……或者其他地方，比如某个地方的拼写错误。