Question

查看全屏网站的示例： https://jsfiddle.net/jwvg23yn/

导航按钮的data-id用于滚动到某个部分。

$(".btn").click(function() {
    var el = $(this).data("id");
    $('html, body').animate({
        scrollTop: $("."+el).offset().top
    }, 500);
});

如果您点击＆＃34;第三个＆＃34;之后＆＃34;第一个＆＃34;页面在第一次单击时向下滚动，然后按预期在第二次向上滚动。但我想要的行为是页面永远不会再向上滚动但总是向下滚动！

问题：如果在最后一个元素后面的视口（负顶部位置）上方，我怎么能移动所有部分？

Answer 1

基本上，每当它们滚动到视线之外时，您可以将它们布置在文档底部并更新滚动位置。

以下示例适用于单击和滚动。（fiddle version）

SO版本：

＆＃13;

var stopFlag = false;
var reorganize = function() {
  if (stopFlag) {
    // we don't need reorganizing when 
    // we scroll as a result of a click 
    // in the menu
    return;
  }
  $('section').each(function() {
    var scrollTop = $(window).scrollTop();
    var $section = $(this);

    var sectionTop = $section.offset().top;
    var sectionHeight = $section.outerHeight();
    var sectionBottom = sectionTop + sectionHeight;
    //console.log(sectionTop, sectionHeight, sectionBottom, scrollTop);
    if (sectionBottom <= scrollTop) {
      // if a section has been scrolled out of sight
      // move it to the bottom of the document and 
      // update the current scroll position
      $('body').append($section.remove());
      $(window).scrollTop(scrollTop - sectionHeight);
    }
  });
};

$(".btn").click(function() {
  var el = $(this).data("id");
  stopFlag = true;
  $('html').animate({
    scrollTop: $("." + el).offset().top
  }, 500, function() {
    // after we finished the scrolling
    // disable the stopFlag and reorganize
    // the elements
    stopFlag = false;
    reorganize();
  });
});

$(window).on('scroll', function() {
  reorganize();
});

＆＃13;

* {
  box-sizing: border-box;
}

body {
  margin: 0;
  font-weight: 500;
  font-family: 'HelveticaNeue';
}

section {
  width: 100%;
  padding: 0 7%;
  display: table;
  margin: 0;
  max-width: none;
  background-color: #373B44;
  height: 100vh;
}

.first {
  background-color: #7BB0A6;
}

.second {
  background-color: #6F532A;
}

.third {
  background-color: #EEE657;
}

h1 {
  font-size: 3em;
  display: block;
  color: white;
  font-weight: 300;
}

.sticky {
  position: fixed;
  width: 100%;
  left: 0;
  top: 0;
  z-index: 100;
  border-top: 0;
  background-color: #fff;
  text-align: center;
  padding: 0;
  margin: 0;
  color: #000;
}

.sticky li {
  display: inline-block;
  cursor: pointer;
}

.sticky li:hover {
  color: #666;
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<ul class="sticky">
  <li class="btn" data-id="first">First</li>
  <li class="btn" data-id="second">Second</li>
  <li class="btn" data-id="third">Third</li>
</ul>

<section class="first">
  <div>
    <h1>First</h1>
  </div>
</section>

<section class="second">
  <div>
    <h1>Second</h1>
  </div>
</section>

<section class="third">
  <div>
    <h1>Third</h1>
  </div>
</section>

＆＃13;

Answer 2

你可以做什么而不是

在最后一个元素后面的视口（负顶部位置）上方移动所有部分后立即移动？

时

将所选部分移至顶部

在$mdDialog.cancel();的动画结束后，您可以将该元素的DOM上的位置更改为第一部分：

scrollTop

Updated Fiddle

2 个答案: