Как добавить класс smoothscroll к ссылке, определенной в jquery

Question

У меня есть кнопка вниз, для которой я хочу, чтобы класс 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); 
} 

Тогда вам просто нужно добавить класс scrollme к любому элементу с данными целевого атрибута с идентификатором элемента, к которому прокручивать.