javascript - scrollTo TweenMax 不完全停在散列上

Question

我的插件 scrollTo (tweenMax) 有问题，当我点击 并且菜单将网站幻灯片链接到我在菜单上选择的部分 ID 时。但是网站不会停在该部分的开头，我需要显示 h2(标题)。

我的代码

$(function(){
  var wrapper = $("#wrapper"),
  $menu = $("#menu");

  $menu.on("click","li", function(){
    var $this = $(this),
        href = $(this).find("a").attr("href"),
        topY = $(href).offset().top;

      TweenLite.to(window, 2, {scrollTo:{y:topY, x:0}, ease:Cubic.easeIn});

    return false;
  });

});

section{
  margin-top: 200px;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script type="text/javascript" src="http://cdnjs.cloudflare.com/ajax/libs/gsap/latest/TweenMax.min.js"></script>
<script type="text/javascript" src="http://cdnjs.cloudflare.com/ajax/libs/gsap/latest/plugins/ScrollToPlugin.min.js"></script>

<div class="wrap">
  <nav id="menu" class="menu">
    <ul class="row-centered">
      <li class="icon-play"><a href="#home">Home</a></li>
      <li class="link-empresa"><a href="#empresa">Link 2</a></li>
      <li class="link-tecnologias"><a href="#tecnologicas">Link 3</a></li>
      <li class="link-cases"><a href="#cases">Link 3</a></li>
      <li class="link-contato"><a href="#contato">Link 4</a></li>
    </ul>
  </nav>
  
  <section id="home"><h2>Title 1</h2></section>
  <section id="empresa"><h2>Title 2</h2></section>
  <section id="tecnologicas"><h2>Title 3</h2></section>
  <section id="cases"><h2>Title 4</h2></section>
  <section id="contato"><h2>Title 5</h2></section>
</div>

在上面的这个例子中，没关系。但是在我的站点中，相同的代码无法正常工作。在我的网站上有一个固定在顶部的菜单，它的高度 = 75px，我输入了 {scrollTo:{y:topY -75, x:0} 但没有用。

更新 1

Project

Answer 1

var extraOffset = $menu.hasClass('fixar') ? 75 : 0;

TweenLite.to(window, 2, { scrollTo: { y: topY - extraOffset, x: 0 }, ease: Cubic.easeIn });

看来问题是在单击事件发生时 $menu 是否已修复。当您一直滚动到顶部时，$menu 不是固定的，但向下滚动一点后，$menu 会固定。这种行为的原因是因为“固定的”$menu 已从网页的一般流程中删除，并且计算出的偏移量被丢弃。

在我的解决方案中，我创建了一个新变量 extraOffset 来检查 $menu 是否已修复。如果是，则该值设置为 75，否则设置为 0。如果您想进一步说明，请告诉我!

编辑:如果您希望在 URL 具有#hashtag 时添加对页面加载时平滑滚动的支持，您可以按照以下示例进行操作:Smooth scroll to anchor after loading new page . 注意:您可能希望始终添加额外的偏移量，因为 $menu 在滚动到内容时应该是固定的。