Question

要解释一下，如果我向下滚动一次，页面不应该根据我滚动的数量移动，但应该直接滚动到下一个ID。如果我向下滚动一次，它应该滚动到下面的id，如果我向上滚动，我想滚动到上面的id，而不是在它们之间的任何地方。

作为参考，在下面的笔中，如果我在这支笔的顶部，我向下滚动一次，它不应该滚动一点，而是滚动使得中间位于视图中。

$(document).ready(function() {
  $('div.top').click(function() {
      $('html, body').animate({
        scrollTop: $("div.middle").offset().top
      }, 1000)
    }),
    $('div.middle').click(function() {
      $('html, body').animate({
        scrollTop: $("div.bottom").offset().top
      }, 1000)
    }),
    $('div.bottom').click(function() {
      $('html, body').animate({
        scrollTop: $("div.top").offset().top
      }, 1000)
    })
});

body,
html {
  width: 100%;
  height: 100%;
  margin: 0;
  display: inline;
}

.top {
  background-color: green;
  height: 100%;
  width: 100%;
  display: flex;
}

.middle {
  background-color: yellow;
  height: 100%;
  width: 100%;
  display: flex;
}

.bottom {
  background-color: red;
  height: 100%;
  width: 100%;
  display: flex;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="top">
  <h1>Top</h1>
</div>
<div class="middle">
  <h1>Middle</h1>
</div>
<div class="bottom">
  <h1>Bottom</h1>
</div>

Answer 1

我从我用一个动画卷轴创建的网站上获取了这个，该卷轴一次滚动整页。我确实更新了它以满足您的特定要求。

var scroll = $(window).scrollTop();
$(document).scroll(function(){
  if((window).scrollTop() > scroll){
    //Scroll Down
    if(window.scrollTop() == $('.top').position().top)
      $("HTML, BODY").animate({ scrollTop: $('.middle').position().top }, 500);
    else $("HTML, BODY").animate({ scrollTop: $('.bottom').position().top }, 500);
  } else {
    //Scroll Up
    if(window.scrollTop() == $('.bottom').position().top)
      $("HTML, BODY").animate({ scrollTop: $('.middle').position().top }, 500);
    else $("HTML, BODY").animate({ scrollTop: $('.top').position().top }, 500);
  }
});

希望它适合你。

Answer 2

找到Seann的here答案的替代方法是在mousewheel事件上使用处理程序，这样您就不必跟踪上一个滚动位置：

db.monitors.aggregate([  
  {"$group":{
    "_id":{
      "year":{"$year":"$date"},
      "dayOfYear":{"$dayOfYear":"$date"},
      "hour":{"$hour":"$date"}
    },
    "count":{"$sum":1}
  }},

  {"$group":{
    "_id":{
      "year":"$_id.year",
      "dayOfYear":"$_id.dayOfYear"
    },
    "dailyCount":{"$sum":"$hourlyCount"},
    "hourlyData":{"$push":{"hour":"$_id.hour","count":"$count"}}
  }}
])

这种方法有一些缺点（最值得注意的是它只适用于您的用户使用鼠标），但根据您的具体需求，它可能适合您。

此外，正如评论中提到的Alex Vand一样，fullpage.js是一个很好的图书馆，可以实现您的目标。

如何滚动到滚动部分

2 个答案: