クリックして上下にスクロール方法

Question

ボタンで上下にスクロールする動きをする処理をしてますが
うまくいきません。
まったくわからない状態です。

いろいろサイトを見て参考になるものを探しましたが見つかりません。
ご教授お願いします。
【簡易サイト】
http://yamapiii.asia/scroll_test/pc/
ナビをクリックする度にコンテンツの位置に上下移動が希望です。

<script type="text/javascript">
  $(function() {
  	var pos = $(".content").offset().top;
	 $(".down_btn").click(function() {
    	$("html, body").animate({scrollTop: pos}, {queue: false});
 	 });
 });
</script>

恥ずかしながら
上記だとまったくダメダメです。

<main>
	<ul class="scroll_btn">
		<li class="up_btn">↑</li>
		<li class="down_btn">↓</li>
	</ul>

	<div class="content">

		コンテンツ
	</div>
	<div class="content">
		コンテンツ
	</div>
	<div class="content">
		コンテンツ
	</div>
	<div class="content">
		コンテンツ
	</div>
</main>

Answer 1

同じような質問が別サイトにありました。
セレクタだけ合わせれば使える気がします。

http://stackoverflow.com/questions/19444717/scroll-up-down-to-sections-with-fixed-buttons#answer-19445506

Comments

[tree_tree]

回答ありがとうございます！
セレクタを合わせてみましたが動きませんでした。

<script type="text/javascript">
(function() {
var $window = $(window);
$('.up_btn').on('click', function(){
$('.content').each(function() {
var pos = $(this).offset().top;
if ($window.scrollTop() < pos) {
$('html, body').animate({
scrollTop: pos
}, 1000);
return false;
}
});
});

$('.down_btn').click(function(){
$($('.content').get().reverse()).each(function() {
var pos = $(this).offset().top;
if ($window.scrollTop() > pos) {
$('html, body').animate({
scrollTop: pos
}, 1000);
return false;
}
});
});
});
</script>

[notable]

JavaScriptを書いた位置によりますが、
(function() {
の前に「$」が必要です。
あと、「.up_btn」と「.down_btn」が逆な気がしますね。

[tree_tree]

ありがとうございます！
無事できました。