Click on the anchor link in JS to scroll smoothly and adjust to the top position freely

<ul>
	<li><a class="anchor" navTo="one">Target selection</a></li>
	<li><a class="anchor" navTo="two">Target customers</a></li>
	<li><a class="anchor" navTo="three">Advertising Format</a></li>
	<li><a class="anchor" navTo="four">Advertising</a></li>
	<li><a class="anchor" navTo="five">Budget and schedule</a></li>
	<li><a class="anchor" navTo="six">Conversion Tracking</a></li>
</ul>

<div class="right">
			<div id="one">
				<div class="target">
					<i>Your goal is to:</i>
					<div class="brand_engagement"><img src="img/signal.png" /><i>Brand Engagement</i><b>Change</b></div>
					<p>I want people to know about my business. </p>
					<div class="advertising_that">
						<img src="img/right.png" /> Your ad will be shown to the right people most likely to view your ad. </b>
					</div>
				</div>
			</div>
			<div id="two">
				The second part of the content </div>
			<div id="three">
				The third part of the content </div>
			<div id="four">
				The fourth part of the content </div>
			<div id="five">
				The fifth part of the content </div>
		</div>

$('.anchor').click(function () {
		var navto = $(this).attr('navto');
		if (navto != "#") {
			var $div = $('#' + navto);
			var top = $div.offset().top || 0;
			$('html,body').animate({
				'scroll-top': top - 150
			}, 500);
		} else {
			$('html,body').animate({
				'scroll-top': 0
			}, 500);
		}
	});