Javascript-форум - Плавный переход к якорю внутри большого DIV блока.

Здравствуйте!

Возникла проблема с точным переходом по якорю с использованием jQuery. Если я проматываю до самого верха и нажимаю ссылку "ВНИЗ", то якорь оказывается где-то выше верхней границы, если немного вниз проматываю, так что ссылка "ВНИЗ" оказывается вверху и нажимаю на нее, то якорь оказывается ниже верхней границы. Подскажите пожалуйста как изменить код чтобы якорь всегда на верхней границе оказывался? Код который я использую:

<html>
	<head>
		<title>testscrolling</title>
		<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.0/jquery.min.js"></script>
		<script type="text/javascript">
			$(function(){
				$('a[href^="#"]').on('click', function(event) {
					event.preventDefault();
					var sc = $(this).attr("href"),
						//dn = $(sc).offset().top;
						dn = $(sc).position().top;
					$('div').animate({scrollTop: dn}, 1000);
				});
			});
		</script>
	</head>
	<body style='overflow-y: none;'>
		<div style='height: 100%;margin: 10px auto;overflow-y: none;'>
			<div style='height: 20%; width: 100%; background: #ffff00'>
			
			</div>
			<div style='background: #00ffff; overflow-y: scroll; height: 60%'>
				<a id="up"></a>
				<?php for($i = 0; $i < 10; $i++) echo "<p>test</p>"?>
				<p><a href="#down" style='background: #FF0000'>ВНИЗ</a></p>
					<?php for($i = 0; $i < 890; $i++) echo "<p>test</p>"?>
				<a id="down"></a>
				<p><a href="#up" style='background: #FF0000'>ВВЕРХ</a></p>
				<?php for($i = 0; $i < 100; $i++) echo "<p>test</p>"?>
			</div>
			<div style='height: 20%; width: 100%; background: #ffff00'>
			
			</div>
		</div>
	</body>
</html>