平滑滚动事件滚动答案

【问题标题】：smooth scroll an event scroll平滑滚动事件滚动
【发布时间】：2019-04-22 02:09:48
【问题描述】：

我想平滑滚动到锚点，而不是通过点击，而是通过事件滚动来激活。

移动滚动条本身会导致滚动条向下移动到该部分，向上移动滚动条将产生与第一部分相同的返回效果。

我正在尝试在 jQuery 中执行此操作，但我错过了一些东西。我设法下拉到底部，但该功能阻止了我。当然有一些简单的提示，但我不知道该寻找什么。

function transitionScroll() {
    if ($(window).width() <= 767) {

      let scrollWatch = window.pageYOffset;
      let positionOfElement = $("#small-carousel").offset().top;

      if ((scrollWatch <= positionOfElement) && (scrollWatch != 0)) {
        $([document.documentElement, document.body]).animate({ scrollTop: $("#small-carousel").offset().top }, 1000);

      }
    }

    $(window).resize(function () {
      if ($(window).width() <= 767) {

        let scrollWatch = window.pageYOffset;
        let positionOfElement = $("#small-carousel").offset().top;

        if (scrollWatch <= positionOfElement) {
          $([document.documentElement, document.body]).animate({ scrollTop: $("#small-carousel").offset().top }, 1000);

        }
      }
    });
  };

  transitionScroll();

  window.addEventListener('scroll', transitionScroll);

【问题讨论】：

$([document.documentElement, document.body]) 很奇怪，看起来不应该起作用。 jQuery 滚动插件、核心和 jQuery UI 选择器通常为$('hml, body')。祝你好运，愿 Scrool 与你同在
@zer00ne 本质上是一样的，只是使用了一个元素数组：api.jquery.com/jQuery/#jQuery-elementArray
请注意，transitionScroll 将事件处理程序附加到 resize 事件。每次用户滚动时，您都会运行它。因此，当用户调整浏览器大小时，您可能会触发大量事件处理程序...
@HereticMonkey 现在我明白了，没有引号所以不是选择器字符串——它是 html 和 body 的数组文字。
好吧，我已经改进了这段代码。中途我设法得到了结果。现在，在第一个“if”中执行代码后，代码循环并且窗口从一个部分转到另一个部分。这种行为来自哪里的任何想法？我认为我应该在满足条件后以某种方式停止或减慢代码的执行速度。 codepen.io/toMuchMike/pen/JVWppq?editors=0011

标签： javascript jquery

【解决方案1】：

最后，我写了一个工作代码。

https://codepen.io/toMuchMike/pen/JVWppq?editors=0011

let windowOnSecond = false;
let touchStart;
const positionOfFirst = $(".first-section").offset().top;
const positionOfSecond = $(".second-section").offset().top;


$(document).ready(function () {

  function doScrolling() {
  $(document).on('touchstart', function (e) {
   touchStart = e.originalEvent.touches[0].clientY;
});


$(document).on('touchend', function (e) {
   var touchEnd = e.originalEvent.changedTouches[0].clientY;
   if (touchStart > touchEnd + 5) {
      let scrollPosition = window.pageYOffset;

     //slide_down
     if ((scrollPosition = positionOfFirst) && (windowOnSecond === false)) {
      $("html, body").animate({ scrollTop: $(".second-section").offset().top }, 1000);
      windowOnSecond = true;
       console.log("DOWN");
      } 


   } else if (touchStart < touchEnd - 5) {
      let scrollPosition = window.pageYOffset;

     //slide_up
     if (scrollPosition <= positionOfSecond) {
      $("html, body").animate({ scrollTop: $(".first-section").offset().top }, 1000);
      windowOnSecond = false;   
       console.log("UP");
    }  
   }
});
};

  if ($(window).width() <= 767) {
    doScrolling();
  }

  $(window).resize(function () {
    if ($(window).width() <= 767) {
      doScrolling();
    }
  });

});

网站的行为如我所愿，但由于某种原因，函数加载延迟，它可能会在代码执行之前阻止滚动一秒钟。运行代码的事件是检测触摸方向，如下所示：Determine vertical direction of a touchmove 这最好在触摸屏上看到，或者在移动模式下的开发工具中看到。

【讨论】：