jQuery：fadeout和scrollto

Question

我使用Bootstrap创建了一个网站。 例如。我们想卖椅子。 现在我们想要扩展，我们也想卖桌子。

我想根据客户的选择切换整个内容。

这是一个onepager网站。您可以看到整个内容从上到下滚动。 有几个部分是这样的。

＆＃13;

＆＃13;

$('#contentfilter1').click(function(e) {
  $('#content1').fadeOut('slow',
    function() {
      $('#content2').fadeIn();
    });
  $('#content1nav').fadeOut('slow',
    function() {
      $('#content2nav').fadeIn();
    });
  $.scrollTo('.sec3', 1000);
  return false;
});
$('#contentfilter2').click(function(e) {
  $('#content2').fadeOut('slow',
    function() {
      $('#content1').fadeIn();
    });
  $('#content2nav').fadeOut('slow',
    function() {
      $('#content1nav').fadeIn();
    });

  $.scrollTo('.sec1', 1000);
  return false;

});

＆＃13;

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

<div id="start">
  <button class="btn" id="contentfilter2">Change to Content 1</button>
  <button class="btn" id="contentfilter1">Change to Content 2</button>
</div>
<div id="content1">
  <section id="sec1" class="sec1">
    <p>This is section1</p>
  </section>

  <section id="sec2" class="sec2">
    <p>This is section2</p>
  </section>
</div>

<div id="content2" style="display:none;">
  <section id="sec3" class="sec3">
    <p>This is section3</p>
  </section>

  <section id="sec4" class="sec4">
    <p>This is section4</p>
  </section>
</div>
<footer>
<p>Footer content</p>
</footer>

＆＃13;

＆＃13;

＆＃13;

当我点击＆＃34;更改为内容2＆＃34; Content1消失，Content2显示。精细。 现在，脚本应滚动到包含内容的第一部分。在我的情况下，＆＃34;第3节＆＃34;。 但脚本滚动到页面底部。脚本不会停止。滚动条位于底部。

当我向上滚动到选择部分并单击＆＃34;更改为内容2＆＃34;再次，网站滚动到右侧部分。 一定有问题，第一次点击后找不到正确的部分。在它可见之后，它正常工作。

任何人都有这个想法，我该如何解决这个问题？ 我必须分开脚本吗？首先显示新内容，然后滚动到内容的开头？

Answer 1

我认为你需要在淡入淡出发生后为你的jQuery添加一行，如下所示：

ExpiresActive On
ExpiresByType image/gif A2592000
ExpiresByType image/jpeg A2592000
ExpiresByType image/jpg A2592000
ExpiresByType image/png A2592000
ExpiresByType image/x-icon A2592000
ExpiresByType text/css A86400
ExpiresByType text/javascript A86400
ExpiresByType application/x-shockwave-flash A2592000
#
<FilesMatch "\.(gif|jpe?g|png|ico|css|js|swf)$">
Header set Cache-Control "public"
</FilesMatch>

这会将页面滚动到“content1”部分的顶部。您可以选择忽略$('#contentfilter2').click(function(e) { $('#content2, #content2nav').fadeOut('slow',function() { $('#content1, #content1nav').fadeIn(); }); $('html,body').animate({scrollTop:$('#content1').offset().top - 20}, 'slow'); return false; }); 中的“-20”部分，或者您可以将任意数字设为您想要的部分 - 它基本上会比您想要的部分高出20个像素，以适应任何导航元素或任何导航元素你想离开那里的空间。

祝你好运！