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

Question

我有一个单页导航站点，所有部分/导航元素都将 min-height 设置为 100vh。这样我就有了一个平滑的滚动片段来导航。

如果我手动滚动并且该部分未居中(就像我单击菜单项时那样)，我希望它在给定的时间后居中。请注意，我不想禁用滚动以仅通过菜单导航。

我在考虑用smoothscroll代码添加一些js。检查部分位置偏移的东西，如果它不居中，使用一些缓动函数平滑滚动它。

https://jsfiddle.net/9ta3yh52/以此为引用，如果颜色超过视口(viewport)的 75%，则滚动到该元素。

谢谢你的帮助:)

编辑/解决方案:

到目前为止，@Hastig Zusammenstellen 给出了最接近的方法

https://stackoverflow.com/a/39188110/6717849

您必须根据需要修改它，以匹配您拥有的部分数量。当部分设置为 height: 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);
  }

Answer 1

您可以将 DOMMouseScroll 和 mousewheel 事件与 animate() 和 scrollTop() 一起使用立即确定好的窗口位置。

这是一个fiddle adaptation of your code .

一段 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
    });
  }
});

来源:

• DOMMouseScroll
• mousewheel
• scrollTop()
• animate()

希望对您有所帮助。