当仅使用普通JavaScript单击按钮时，如何滚动到下一节/div（可选）？

在过去的几个月里，我一直在学习Js，直到我对纯Js非常熟悉，我才开始学习任何Jquery

我想要一些与不使用Jquery具有完全相同效果的东西。如果可能，请包括注释以进行解释

// --------- Jquery ---------


$(function(){

var pagePositon = 0,
    sectionsSeclector = 'section',
    $scrollItems = $(sectionsSeclector),
    offsetTolorence = 30,
    pageMaxPosition = $scrollItems.length - 1;

//Map the sections:
$scrollItems.each(function(index,ele) { $(ele).attr("debog",index).data("pos",index); });

// Bind to scroll
$(window).bind('scroll',upPos);

//Move on click:
$('#arrow a').click(function(e){
    if ($(this).hasClass('next') && pagePositon+1 <= pageMaxPosition) {
        pagePositon++;
        $('html, body').stop().animate({ 
              scrollTop: $scrollItems.eq(pagePositon).offset().top
        }, 300);
    }
    if ($(this).hasClass('previous') && pagePositon-1 >= 0) {
        pagePositon--;
        $('html, body').stop().animate({ 
              scrollTop: $scrollItems.eq(pagePositon).offset().top
          }, 300);
        return false;
    }
});

//Update position func:
function upPos(){
   var fromTop = $(this).scrollTop();
   var $cur = null;
    $scrollItems.each(function(index,ele){
        if ($(ele).offset().top < fromTop + offsetTolorence) $cur = $(ele);
    });
   if ($cur != null && pagePositon != $cur.data('pos')) {
       pagePositon = $cur.data('pos');
   }                   
}

});

/-----------Jquery---------
$（函数（）{
var pagePositon=0，
sectionsSeclector=‘section’，
$scrollItems=$（SectionsClector），
偏移量=30，
pageMaxPosition=$scrollItems.length-1；
//绘制各部分的地图：
$scrollItems.each（函数（index，ele）{$（ele.attr（“debog”，index）.data（“pos”，index）；}）；
//绑定到滚动
$（窗口）.bind（'scroll'，upPos）；
//点击移动：
$（'#箭头a'）。单击（函数（e）{
if（$（this）.hasClass（'next'）&&pageposition+1=0）{
页面位置--；
$（'html，body'）.stop（）.animate（{
scrollTop:$scrollItems.eq（pagePositon）.offset（）.top
}, 300);
返回false；
}
});
//更新位置函数：
函数upPos（）{
var fromTop=$（this.scrollTop（）；
var$cur=null；
$scrollItems.每个（函数（索引、元素）{
if（$（ele）.offset（）.top

给你：

var secs = document.querySelectorAll('section');
var currentSection = 0;
document.querySelector('#arrow').addEventListener('click', move);

function move(e) {
  if (e.target.classList.contains('next') && currentSection < secs.length) {
    window.scroll({
      top: secs[++currentSection].offsetTop,
      left: 0,
      behavior: 'smooth'
    });
    //    secs[++currentSection].scrollIntoView({ behavior: 'smooth' });
  } else if (currentSection > 0) {
    window.scroll({
      top: secs[--currentSection].offsetTop,
      left: 0,
      behavior: 'smooth'
    });

  }
}

var secs=document.queryselectoral（'section'）；
var currentSection=0；
document.querySelector（“#箭头”）.addEventListener（'click'，move）；
功能移动（e）{
if（e.target.classList.contains（'next'）&¤tSection0）{
滚动窗口({
顶部：秒[--currentSection]。偏移，
左:0,，
行为：“平滑”
});
}
}

这是解决办法。我使用了smoothscroll API polyfill。对于浏览器不支持API（）的动画。

已更新

---

“除非我用鼠标手动滚动到另一个div，然后尝试点击next/prev按钮，否则效果很好。有什么解决方案吗？谢谢”

每个

动态地被赋予一个

数据id

属性，该属性具有与其索引相对应的值。如果单击了

，则它将成为当前活动的

，因此当单击箭头时，滚动将从那里开始

演示的特定部分已被评论为“更新”

---

有一种完美的方法叫做

  x.scrollIntoView({ 
     behavior: 'smooth' 
  });

它内置了类似jQuery的选项

演示中评论的详细信息

演示

//函数外部的引用计数器
var-idx=0；
//收集节点列表中的所有部分
var sxn=document.queryselectoral（'section'）；
//更新
/*循环遍历节点列表sxn
||为每个节指定数据id属性
||将数据id值设置为每个数据库的当前索引
||部分
*/
for（设i=0；isxn.length-1）{
idx=0；
}
}
返回idxScroll（idx）；
}
//通过idxScroll传递idx
函数idxScroll（idx）{
//参考电流有效段
var act=document.querySelector（'.active'）；
//确定哪个部分处于活动状态
var x=sxn[idx]；
//从当前节中删除活动类
act.classList.remove（'active'）；
//将活动类添加到新节
x、 添加（'active'）；
/*scrollIntoView方法有一个可以设置动画的行为选项
||滚动
*/
x、 滚动视图({
行为：“平滑”
});
}

main{
宽度：100vw；
高度：自动；
}
导航{
位置：固定；
z指数：1；
宽度：20%；
右：0；
排名：0
}
a{
宽度：48px；
高度：48px；
字体大小：48px；
文字装饰：无；
}
部分{
宽度：100vw；
高度：100vh；
}

除非我用鼠标手动滚动到另一个div，然后尝试点击next/prev按钮，否则效果很好。有什么解决办法吗？感谢you@TarekDemachkie现在，它将从单击的最后一个部分开始滚动。因此，如果您手动向下滚动2个部分，然后单击您所在的部分（第3部分），当您通过单击箭头为其指定方向后，它将从第3部分开始滚动。请参阅更新仅当我仅使用按钮时，此功能才起作用。当使用鼠标手动滚动，然后使用按钮时，它不起作用。有什么解决方案吗？是的…将滚动目标设置为实际元素而不是窗口。让我来编辑小提琴，你会看到的。这让你开始了。注意我是如何简化代码的。还有其他一些改进使得它在手动滚动时仍然存在问题。试着先用鼠标滚动到下一个彩色框，然后点击“下一个”，看看我在说什么。谢谢你的努力你考虑过用它吗？有一个提供这种功能的pl