Как сделать плавный скролл якоря?

$(document).ready(function(){ 
	$(document).on("click","a", function (e) { 
		e.preventDefault(); 
 
		var id  = $(this).attr('href'), 
 
		top = $(id).offset().top; 
		 
		$('body,html').animate({scrollTop: top}, 200); 
	}); 
});

.block { 
  height:400px; 
} 
.block_blue { 
  background-color: blue; 
} 
.block_red { 
  background-color: red; 
} 
.block_pink { 
  background-color: pink; 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
<a href="#block-1"> 
  <p class="header-nav nav-1">home</p> 
</a> 
<a href="#block-2"> 
  <p class="header-nav">about</p> 
</a> 
<a href="#block-3"> 
  <p class="header-nav">work</p> 
</a> 
<div id="block-1" class="block block_blue"></div> 
<div id="block-2" class="block block_red"></div> 
<div id="block-3" class="block block_pink"></div>