클릭 할 때마다 400px 아래로 스크롤하는 버튼이 필요합니다.

Question

버튼으로 사용할 이미지가 있습니다. 이미지가 클릭 될 때마다 페이지가 400px 아래로 부드럽게 스크롤되도록하는 코드가 필요합니다.

저는 JQuery 나 Javascript가 그 트릭을 할 것이라고 생각합니다. 나는 그것들을 모르기 때문에 정말로 확신하지 못합니다.

버튼 대신 키보드 단축키를 사용할 수도 있습니다. Google+의 Google과 마찬가지로 'J'와 'K'는 게시물을 위아래로 이동하는 데 사용됩니다. 이것은 내가 성취하려는 것입니다. 내 사이트의 모든 게시물은 동일한 높이이므로 코드 작성이 쉽습니다.

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

그리고 :

Answer 1

그냥 페이지에이 버튼을 배치, 이미지 또는 버튼의 클릭 이벤트에 애니메이션 기능을 결합하고 예를 들어 400

와 scrollTop 속성을 애니메이션하자 이 자바 스크립트를 사용하십시오 :

$('#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> 

그리고 자바 스크립트 스 니펫 (snippet)을 포함하는 가장 좋은 방법은 위의 스크립트 규칙 및 신체 종료 태그 사이에 다음과 같은 배치하는 것입니다.

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