Javascript 自动滚动到每个div或element

当用户使用鼠标中的滚动按钮时，我需要一些关于自动滚动到每个div或元素的帮助。情况是这样的

假设这是我的页面结构

<div id="main-wrap">

<div class="my-div-1">
    <p>here goes my content 1</p>
    <img src="/images/sample-1" alt="sample-1"/>

</div>

<div class="my-div-2">

<p>here goes my content 2</p>
<img src="/images/sample-2" alt="sample-2"/>

</div>

<div class="my-div-3">

<p>here goes my content 3</p>
<img src="/images/sample-3" alt="sample-3"/>

</div>

</div><!-- end of main-wrap id -->

这是我的内容1

这是我的内容2

这是我的内容3

-现在假设我的每个div都有足够的内容使页面变长。假设用户在my-div-1上，当查看器使用滚动按钮向下滚动时，我希望它自动滚动到my-div-2，而不是滚动整个div

我希望我的解释在这里有意义

有没有办法通过使用javascript和jquery进行分类

---

如有任何回复，我将不胜感激。提前谢谢

这是你想要的东西：

代码中使用的插件来源（去盎司/节流插件）：

代码

// debounce/throttle plugin
(function(b,c){var $=b.jQuery||b.Cowboy||(b.Cowboy={}),a;$.throttle=a=function(e,f,j,i){var h,d=0;if(typeof f!=="boolean"){i=j;j=f;f=c}function g(){var o=this,m=+new Date()-d,n=arguments;function l(){d=+new Date();j.apply(o,n)}function k(){h=c}if(i&&!h){l()}h&&clearTimeout(h);if(i===c&&m>e){l()}else{if(f!==true){h=setTimeout(i?k:l,i===c?e-m:e)}}}if($.guid){g.guid=j.guid=j.guid||$.guid++}return g};$.debounce=function(d,e,f){return f===c?a(d,e,false):a(d,f,e!==false)}})(this);

//elements you want to scroll to go here
divs = [$(".my-div-1"),$(".my-div-2"),$(".my-div-3")];

var lastScrollTop = 0; //we'll update this on every scroll and compare it to the last scroll to determine the scroll direction
var run = true;

$(window).scroll($.debounce(250, true, function () { //debounce so it only runs once per scroll
  var st = $(window).scrollTop();
  if (st > lastScrollTop) { // if the scrollTop when the scroll event fires is larger than the last scroll, we can assume the scroll was in a downward direction
    $.each(divs, function (i, v) {
      ((v.offset().top - $(window).scrollTop()) < 0) && (next = i + 1); //compare each elements offset to the windows offset to determine which element we're currently scrolling through
    });      
    run = (next != divs.length) ? true : false; //dont run if we are at the last div
  } else {
    $.each(divs, function (i, v) {
      ((v.offset().top - $(window).scrollTop()) < 0) && (next = i);
    }); 
    run = true;
  }
  if (run) {
    $('html, body').animate({
      scrollTop: divs[next].offset().top
    }, 1000,'linear', function() {
      lastScrollTop = $(window).scrollTop();
    });
  } else { lastScrollTop = $(window).scrollTop(); }
}));

//去盎司/节流插件
（b.cobobobo元元元元元元元元元元元元元元元元元元元元元元元元元元元元元元元元元元元元元元元元元元元元元元元元元元元元元元元元元元元元元元元元元元元元元元元元元元元元元元元元元元元元元元元元元元元元元元元元元元元元元元元元元元元元元元元元元元元元元元元元元元元元元元元元元元元元元元元元元元元元元元元元元元元元元元元元元元元元元元元元元元元元元元元元元元元元元元元元元元元元元元元元元元元元元元元元元元元元元元元元元元元元元元元元元元元元元元元元元元元元元元元元元元元元元元元元元元{l（）}否则{if（f！==true）{h=setTimeout（i？k:l，i==c？e-m:e）}}if（$.guid）{g.guid=j.guid=j.guid |$.guid++}返回g}；$.debounce=function（d，e，f）{return f==c？a（d，e，false）：a（d，f，e！==false）}（this）；
//要滚动到此处的元素
divs=[$（“.my-div-1”）、$（.my-div-2”）、$（.my-div-3”）；
var lastScrollTop=0//我们将在每个卷轴上更新此内容，并将其与上一个卷轴进行比较，以确定卷轴方向
var-run=true；
$（窗口）.scroll（$.debounce（250，true，function（）{//debounce），因此每个滚动只运行一次
var st=$（window.scrollTop（）；
如果（st>lastScrollTop）{//如果scroll事件触发时的scrollTop大于上一个滚动，我们可以假设滚动是向下的
$。每个（分区、功能（i、v）{
（（v.offset（）.top-$（window.scrollTop（））<0）和&（next=i+1）；//将每个元素偏移量与windows偏移量进行比较，以确定当前正在滚动的元素
});      
run=（next！=divs.length）？true:false；//如果我们在最后一个div，就不要运行
}否则{
$。每个（分区、功能（i、v）{
（（v.offset（）.top-$（window.scrollTop（））<0）和&（next=i）；
}); 
run=true；
}
如果（运行）{
$（'html，body'）。设置动画({
scrollTop:divs[next].offset（）.top
}，1000，“线性”，函数（）{
lastScrollTop=$（窗口）.scrollTop（）；
});
}else{lastScrollTop=$（窗口）.scrollTop（）；}
}));

我并没有完全按照您的要求来做，但是如果您希望在带有滚动条的区域中显示内容，您可以指定一个固定的高度，并在CSS中使用“溢出：滚动”。基本上是这样的：但滚动而不是单击。谢谢。我现在明白了。但它似乎给向上滚动带来了麻烦。@Zawad查看我的编辑-它并不完美，但现在可以向上滚动。这应该是你问题的充分答案，如果已经解决，请将其标记为已解决。看起来不错。实际上我是新来的，所以你能告诉我如何将你的回复标记为已解决。我找不到办法。左边投票向上/向下箭头下的复选标记