アニメーション関数を画像またはボタンのクリック イベントにバインドし、scrollTop プロパティを 400 でアニメーション化するだけです。
たとえば、次のボタンをページに配置します。
<input type="button" value="Scroll" id="scroll" />
そして、次の JavaScript を使用します。
$('#scroll').click(function() {
$('body').animate({scrollTop: +400}, 1000);
})
jQuery がロードされていることを確認してください。
body 終了タグの直前にこれを追加して、jQuery をロードします。
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
JavaScript スニペットを含める最良の方法は、上記のスクリプト ルールと body 終了タグの間に次のコードを配置することです。
<script type="text/javascript">
$(document).ready(function() {
$('#scroll').click(function() {
$('body').animate({scrollTop: +400}, 1000);
})
});
</script>