Question

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

移动滚动条本身会使滚动条下降到该部分，而向上移动滚动条将使第一部分具有相同的返回效果。

我正在尝试使用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);

Answer 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最好在触摸屏或移动模式下的开发工具上看到。

平滑滚动事件滚动

1 个答案: