jsで追加した要素を画面上までスクロールさせたい

Question

ラジオボタンを使ったクイズを作成しています。
全てのクイズの答えを選択してページ下部にある採点ボタンを押したら、採点ボタンの下に採点結果を出力したいと考えています。

しかし、ボタンの下に採点結果を出力するとボタンを押す位置によっては結果が表示されていることがわかりにくいため、採点ボタンを押したら、追加した採点結果までスクロールされるようにしたいです。

function saiten(){
	var point = 0;
	var max = 5;
	var test = document.getElementById("test");

	if(document.quiz.a[0].checked){point+=1;}
	if(document.quiz.b[0].checked){point+=1;}
	if(document.quiz.c[0].checked){point+=1;}
	if(document.quiz.d[0].checked){point+=1;}
	if(document.quiz.e[0].checked){point+=1;}

	if(point>=0 && point<2){
		test.innerHTML = '[結果に応じた出力用テキスト]';
	} else if(point>=2 && point<3) {
		test.innerHTML = '[結果に応じた出力用テキスト]';
	} else {
		test.innerHTML = '[結果に応じた出力用テキスト]';
	}
}

<form name="quiz">
<p>Q1 クイズ１の問題文</p><br>
<label><input type=radio name="a" checked>アンサー１</label>
 <label><input type=radio name="a">アンサー２</label>
 <label><input type=radio name="a">アンサー３</label>
<p>Q2 クイズ２の問題文</p><br>
<label><input type=radio name="b" checked>アンサー１</label>
 <label><input type=radio name="b">アンサー２</label>
 <label><input type=radio name="b">アンサー３</label>
<p>Q3 クイズ３の問題文</p><br>
<label><input type=radio name="c" checked>アンサー１</label>
 <label><input type=radio name="c">アンサー２</label>
 <label><input type=radio name="c">アンサー３</label>
<p>Q4 クイズ４の問題文</p><br>
<label><input type=radio name="d" checked>アンサー１</label>
 <label><input type=radio name="d">アンサー２</label>
 <label><input type=radio name="d">アンサー３</label>
<p>Q5 クイズ５の問題文</p><br>
<label><input type=radio name="e" checked>アンサー１</label>
 <label><input type=radio name="e">アンサー２</label>
 <label><input type=radio name="e">アンサー３</label>
<input type=button value="採点" onClick="saiten()">

<div id="test"></div>
</form>

【やりたいこと】
１）採点ボタンをクリック
２）採点結果を採点ボタン下に表示
３）採点結果が画面の上にくるようスクロールさせる

（１で採点ボタンをクリックしたら２、３の動きをさせたいです。）

$("#test").scrollTo(0);
を追加したりしてみましたがうまくいきませんでした。

どのようにしたらこの挙動を実現することが可能でしょうか？
アドバイスいただけると幸いです。

何卒よろしくお願いいたします。

Comments

[s8_chu]

HTMLを追記していただけませんか？

[groco]

遅くなってしまい申し訳ございません。htmlを追記させていただきました。

[s8_chu]

度々申し訳ないのですが、CSSは設定されていますか？もし設定されているのであればCSSも追記したほうが回答がつきやすいと思います。

[groco]

いえ、まだcssは設定していません。htmlで縦に並べているだけです。

Answer 1

該当要素にidを指定し
window.location.hash = 指定したid

でスクロールされます。

質問のコードだとid=test要素に結果を入れているみたいなので
window.location.hash = 'test'

仕組みを詳しく知りたい場合は、ページ内リンクで調べて見てください。

Comments

[groco]

ありがとうございます！
無事、実現することができました。
今後も必要になる処理かと思いますので、仕組みに関しては後で調べてみたいと思います。

Answer 2

こちらの方法で指定のidの要素までスクロールが可能です。
http://qiita.com/yamaguchi_takashi/items/edce735e825631993a74

Comments

[groco]

ありがとうございます！
無事に実装することができました。
また、教えていただいた記述ですとスムーズスクロールになっていて、より理想に近い挙動でした。