How do I slow down a single page smooth scroll?

Question

I've added some javascript to a one-page website for the nav bar tags. So now when a user clicks on the heading it takes them straight to that section. At the moment it goes straight to the section, how do I slow this down so there's a smooth scroll transition from the nav through to the section selected?

Here's my code as it stands -

$('a[href^="#"]').click(function(event) {
  var id = $(this).attr("href");
  var target = $(id).offset().top;
  $('html, body').animate({
    scrollTop: target
  }, 500);
  event.preventDefault();
});

function getTargetTop(elem) {
  var id = elem.attr("href");
  var offset = 60;
  return $(id).offset().top - offset;
}


$(window).scroll(function(e) {
  isSelected($(window).scrollTop())
});

var sections = $('a[href^="#"]');

function isSelected(scrolledTo) {

  var threshold = 100;
  var i;

  for (i = 0; i < sections.length; i++) {
    var section = $(sections[i]);
    var target = getTargetTop(section);

    if (scrolledTo > target - threshold && scrolledTo < target + threshold) {
      sections.removeClass("active");
      section.addClass("active");
    }

  };
}

header {
  height: 50px;
}

nav {
  text-align: center;
  padding: 10px;
  margin-top: 20px;
}

nav a {
  color: #000000;
  transition: all 0.2s ease-in-out 0s;
  text-decoration: none;
  display: inline-block;
  padding: 5px;
  border-bottom: 2px solid transparent;
}

nav a:link {
  color: #000000;
  text-decoration-line: none;
}

nav a:nth-of-type(1):hover {
  border-color: rgb(255, 29, 142);
}

nav a:nth-of-type(2):hover {
  border-color: rgb(133, 52, 146);
}

nav a:nth-of-type(3):hover {
  border-color: rgb(255, 128, 55);
}

nav a:nth-of-type(4):hover {
  border-color: rgb(0, 182, 223);
}

nav a:nth-of-type(5):hover {
  border-color: rgb(63, 190, 150);
}

nav a:nth-of-type(6):hover {
  border-color: rgb(255, 222, 32);
}

nav a:hover {
  color: #000000;
}

#logo {
  width: 100%;
  max-width: 100%;
  height: 750px;
}

#whatwedo {
  width: 100%;
  max-width: 100%;
  height: 750px;
}

#whoweare {
  width: 100%;
  max-width: 100%;
  height: 750px;
}

#partners {
  width: 100%;
  max-width: 100%;
  height: 750px;
}

#contact {
  width: 100%;
  max-width: 100%;
  height: 750px;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<header>
  <nav>
    <a href="#logo">Home</a>
    <a href="#whatwedo">What we do</a>
    <a href="#whoweare">Who we are</a>
    <a href="#partners">Who we work with</a>
    <a href="#contact">Say hello</a>
    <a href="Blog">Blog</a>
  </nav>

</header>

<section id="logo">Logo</section>

<section id="whatwedo">What we do </section>

<section id="whoweare"> Who we are </section>

<section id="partners"> Our Partners </section>

<section id="contact"> Contact </section>

Answer 1

you have to modify the value of the animate and put a bigger one like this :

$('html, body').animate({
    scrollTop: target
  }, 2000);

2000 means 2 sec