Question

我遇到插件scrollTo（tweenMax）的问题，当我点击并且菜单链接网站滑动到我在菜单上选择的部分ID时。但该网站的开头并没有停止，我需要显示h2（标题）。

我的代码

＆＃13;

$(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;
  });

});

＆＃13;

section{
  margin-top: 200px;
}

＆＃13;

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

＆＃13;

在上面的例子中，它没问题。但在我的网站上，相同的代码效果不佳。在我的网站上有一个固定在顶部的菜单，它的高度= 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 });

似乎问题是当click事件发生时$菜单是否被修复。当您一直滚动到顶部时，$menu不固定，但向下滚动一点后，$menu就会固定。这种行为的原因是因为＆＃34;固定＆＃34; $menu将从网页的常规流程中删除，并且计算出的偏移量将被删除。

通过我的解决方案，我创建了一个新变量extraOffset，用于检查$menu是否已修复。如果是，则该值设置为75，否则为0.如果您想进一步澄清，请告诉我们！

修改：如果您希望在网址为#hashtag时添加对网页加载时平滑滚动的支持，则可以按照以下示例操作：Smooth scroll to anchor after loading new page。 注意： 您可能希望始终添加额外的偏移量，因为在滚动到内容时预计$menu会被修复。

scrollTo TweenMax不会完全停止在哈希上

1 个答案: