Javascript 在给定的时间后，平滑滚动到中心当前部分

我有一个单页导航站点，所有部分/导航元素都将

min height

设置为

100vh

。有了它，我就有了一个平滑的滚动片段来导航

如果我手动滚动并且该部分没有居中（就像我点击菜单项一样），我希望它在给定的时间后居中。注意，我不想禁用滚动，只通过菜单导航

我正在考虑使用smoothscroll代码添加一些js。检查截面位置偏移的东西，如果它没有居中，则使用一些缓和功能平滑滚动它

将此作为参考，如果颜色位于查看端口的75%以上，请滚动到该元素

感谢您的帮助：）

编辑/解决方案：

迄今为止，@Hasting Zusammenstellen给出了最接近的方法

您必须根据自己的需要对其进行修改，以便与您拥有的部分数量相匹配。当节段设置为

高度：100vh

时，逻辑很简单：

if (scrollTop <= sectionHeightHalf) {
    $('html, body').animate({
      scrollTop: $("#section1").offset().top
    }, 300);
  } else if (scrollTop >= sectionHeightHalf && scrollTop <= ($(window).height() * 2 - sectionHeightHalf)) {
      $('html, body').animate({
        scrollTop: $("#section2").offset().top
      }, 300);
  } else if (scrollTop >= sectionHeightHalf && scrollTop <= ($(window).height() * 3 - sectionHeightHalf)) {
      $('html, body').animate({
        scrollTop: $("#section3").offset().top
      }, 300);
  } else if (scrollTop >= sectionHeightHalf && scrollTop <= ($(window).height() * 4 - sectionHeightHalf)) {
      $('html, body').animate({
        scrollTop: $("#section4").offset().top
      }, 300);
  } else if (scrollTop >= sectionHeightHalf && scrollTop <= ($(window).height() * 5 - sectionHeightHalf)) {
      $('html, body').animate({
        scrollTop: $("#section5").offset().top
      }, 300);

// etc etc

  } else if (scrollTop >= ($(window).height() * 2 - sectionHeightHalf)) {
      $('html, body').animate({
        scrollTop: $("#lastsection").offset().top
      }, 300);
  }

if（scrollTop=sectionHeightHalf&&scrollTop=sectionHeightHalf&&scrollTop=sectionHeightHalf&&scrollTop=sectionHeightHalf&&scrollTop=sectionHeightHalf&&scrollTop=sectionHeightHalf&&scrollTop=sectionHeightHalf&&Scr{
$（'html，body'）。设置动画({
scrollTop:$（“#lastsection”）.offset（）.top
}, 300);
}

您可以使用

DOMMouseScroll

和

mousewheel

事件和

animate（）

和

scrollTop（）

直接转到良好的窗口位置

这是一本书

一段jQuery代码：

$('#about').on('DOMMouseScroll mousewheel', function (e) {
    // scroll down
    if(e.originalEvent.detail > 0 || e.originalEvent.wheelDelta < 0) {
    $('html, body').animate({
      scrollTop: $('#services').offset().top
    });
  }
});

$（'#about'）。在（'DOMMouseScroll mouseweel'，函数（e）上{
//向下滚动
如果（e.originalEvent.detail>0 | | e.originalEvent.wheelDelta<0）{
$（'html，body'）。设置动画({
scrollTop:$（“#服务”）.offset（）.top
});
}
});

资料来源：

---

希望对您有所帮助。

新版本的制作使用了受启发或基于代码的设计

它修复了上一版本的双滚动问题，但现在似乎有时会在自动居中后仍然存在

$（函数（）{
$（窗口）。滚动（函数（）{
$（'monitor'）.html（'SCROLLING'）；
clearTimeout（$.data（这是“滚动检查”）；
$.data（这是'scrollCheck'，setTimeout（函数（）{
$（'monitor'）.html（'PAUSED'）；
var sectionHeightHalf=$（窗口）.height（）/2；
var scrollTop=$（窗口）.scrollTop（）；
如果（滚动顶部=截面高度一半和
scrollTop=（$（窗口）.height（）*2-截面高度一半））{
$（'html，body'）。设置动画({
滚动顶部：$（“#图库”）.offset（）.top
}, 300);
}
}, 300) );
});
});
html，正文{
保证金：0；
填充：0；
}
部分{
位置：相对位置；
}
markercenter、markerbottom、markerfixed、监视器{
/*脚手架，待拆除*/
显示器：flex；
证明内容：中心；
对齐项目：居中；
高度：20px；宽度：20px；
字体大小：14px；
颜色：白色；
}
markercenter{
/*脚手架，待拆除*/
/*这些是用来判断测试屏幕中心的*/
位置：绝对位置；
top:50%；transform:translateY（-50%）；
左：50%；变换：translateX（-50%）；
背景色：黑色；
}
markerbottom{
/*脚手架，待拆除*/
/*这些是用来判断测试屏幕中心的*/
位置：绝对位置；
//top:50%；transform:translateY（-50%）；
左：50%；变换：translateX（-50%）；
底部：-10px；
高度：20px；宽度：20px；
字体大小：14px；
颜色：白色；
背景色：黑色；
}
markerfixed{
/*脚手架，待拆除*/
/*这些是用来判断测试屏幕中心的*/
位置：固定；
top:50%；transform:translateY（-50%）；
左：50%；变换：translateX（-50%）；
高度：20px；宽度：20px；
背景色：rgba（251,45,45,0.7）；
}
监视器{
/*脚手架，待拆除*/
位置：固定；
左：50%；变换：translateX（-50%）；
底部：0；
宽度：100px；
填充：2x10px 0px 10px；
字体大小：14px；
颜色：白色；字体大小：粗体；
背景色：黑色；
}
部分{
宽度：100%；
最小高度：100vh；
}
#关于{
背景色：hsla（182,100%，85%，0.5）；
}
#服务{
背景色：hsla（61,99%，59%，0.5）；
}
#画廊{
背景色：rgba（195251,45,0.5）；
}

11
22
33
我在开始/停止部分使用了to，这是一个好的开始！谢谢你的回答，但现在我需要让当前的可见部分滚动到它。有什么提示吗？这个项目可能有一些我们正在寻找的答案。对不起，错过了你的评论。我将在稍后查看关于我当前版本的双滚动问题的一些想法。我建议全页库之王：）这不是期望的行为，我希望站点正常滚动，而不是逐节滚动。但一旦滚动停止，将当前部分居中。不管怎样，谢谢你的回答，它给了我一些想法。事实上，这就是我所想的，但即使我在某个点滚动，它也会滚动到某个部分。函数应该只在冷却后执行，如果我再次滚动，则重置冷却。@Rotsyx改进了但不完善的版本添加了上一个版本现在看起来好多了，它有时会停留在中间，但我不知道如何在这行代码中改进它！非常感谢您抽出时间，我在尝试解决这个问题时学到了很多东西；）