다음 섹션으로 스크롤 할 단추를 추가하려면 어떻게이 템플릿을 수정할 수 있습니까?

Question

가로로 스크롤하는 웹 페이지를 만들려고합니다. 이 템플릿은 J Query와 CSS를 사용하여 너비를 제어하지만 스크롤 막대를 아래쪽으로 드래그해야합니다. 사용자가 클릭 할 수있는 화살표를 추가하거나 다음 섹션으로 넘어갈 수있는 방법은 무엇입니까?

http://css-tricks.com/how-to-create-a-horizontally-scrolling-site/

Answer 1

체크 아웃 사용자가 스크롤을 결정하는 scrollLeft 및 offset()을 사용할 수 있습니다 http://plugins.jquery.com/project/ScrollTo

Answer 2

이 jQuery 플러그인 : 다음 버튼은 다음과 같을 수

샘플에 매우 밀접하게 기반 (제 7 장에서 jQuery Enlightenment) :

$(".next").click(function(e){ 
    $('html, body').animate({ 
     scrollLeft: $(this).closest('td').next().offset().left 
    }, 1000); 
    e.preventDefault(); 
}); 

CSS-Tricks 기사를 자세히 읽은 것으로 가정합니다. 즉, 페이지에 table이 있음을 의미합니다.

당신은 당신이 이런 식으로 할 수있는 애니메이션하지 않은 경우 :

$(".next").click(function(e){ 
    $('html, body').scrollLeft($(this).closest('td').next().offset().left); 
    e.preventDefault(); 
}); 

을