how can i make this jQuery scroll smoothly to the div i am targeting

$(function() {
  $('#exampleModal').modal({
    show: true,
    keyboard: false,
    backdrop: 'static',
  });
  
  $('.workbook_link').click(function() {
    $('html, body').animate({
      scrollTop: $("#cardworkbook").position().top - 100
    }, 1000);
  });
  
  $('.workbook_link').click(function() {
    $('html, body').animate({
      scrollTop: $("#mainworkbook").offset().top
    }, 500);
  });

  $('.about_tool').click(function() {
    $('html, body').animate({
      scrollTop: $('.about_section_area').offset().top
    }, 500)
  });
});