javascript - 如何将类 smoothscroll 添加到 jquery 中定义的链接

Question

我有一个向下按钮 div，我想添加 smoothScroll 类，这样当单击它时，平滑滚动会在它跳转到 JS 文件中附加到它的链接之前发生。我只是不确定如何让 addClass 在 window.location 之前运行，每次我尝试它都会中断。

HTML:

<div id="downButton">
    <i class="fa fa-angle-down"></i>
  </div>

JS:

  $(function() {
  // This will select everything with the class smoothScroll
  // This should prevent problems with carousel, scrollspy, etc...
    $('.smoothScroll').click(function() {
      if (location.pathname.replace(/^\//, '') == this.pathname.replace(/^\//, '') && location.hostname == this.hostname) {
        var target = $(this.hash);
        target = target.length ? target : $('[name=' + this.hash.slice(1) + ']');
        if (target.length) {
          $('html,body').animate({
            scrollTop: target.offset().top
          }, 1000); // The number here represents the speed of the scroll in milliseconds
          return false;
        }
      }
    });
  });
  });

 $('#downButton').click(function () {
    window.location = '#aboutSection';
 }); 

Answer 1

让这个快速工作的最简单方法是这样的:

$(function(){
    $('#downButton').click(function () {
        var target = $('#aboutSection');
        $('html,body').animate({
                scrollTop: target.offset().top
              }, 1000);
     }); 
});

如果您想让它更加可重用，我会这样做:

HTML:

<div id="downButton" class="scrollme" data-goto="#aboutSection">
    <i class="fa fa-angle-down"></i>
</div>

那么 JavaScript 将是:

$(function() {
  $('.scrollme').click(function(){
      scrollme(this);
  });
});

function scrollme(el){
    var id = $(el).data('target');
    var $target = $('#' + id);
    console.log($target.length)
    $('html,body').animate({
        scrollTop: $target.offset().top
    }, 1000);
}

然后，您只需向任何具有 data-target 属性的元素添加一个滚动类，其中包含要滚动到的元素的 id。