ボタンをクリックするたびに400ピクセル下にスクロールするボタンが必要です

Question

ボタンとして使用するイメージがあります。画像がクリックされるたびに400pxのスクロールをスムーズに行うためのコードが必要です。

私はJQueryやJavascriptがこのトリックをやると思っています。私はそれらを知らないので、私は本当に分かりません。

実際、ボタンの代わりにキーボードショートカットを使用すると、さらに効果的です。 Google+のGoogleと同じように、「J」と「K」は投稿を上下に移動するために使用されます。これはまさに私が達成しようとしていることです。私のサイトのすべての投稿は同じ高さになるので、簡単にコーディングすることができます。

Answer 1

ちょうどあなたの画像やボタンのクリックイベントにアニメーション機能を結合して、それが例えば400

とscrollTopスプライトプロパティをアニメーションさせ、あなたのページにこのボタンを配置します。

<input type="button" value="Scroll" id="scroll" /> 

そして、このJavaScriptを使用してください：

$('#scroll').click(function() { 
    $('body').animate({scrollTop: +400}, 1000); 
}) 

jQueryがロードされていることを確認してください。

負荷だけで体の終了タグの前にこれを追加することでjQueryの：

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script> 

とJavaScriptスニペットを含めるための最良の方法は、上記のスクリプトのルールと体の終了タグの間で次のように配置することです。

<script type="text/javascript"> 
$(document).ready(function() { 
    $('#scroll').click(function() { 
     $('body').animate({scrollTop: +400}, 1000); 
    }) 
}); 
</script>