오른쪽 스크롤 버튼 옆에 스크롤 왼쪽 버튼 만들기

Question

이 질문이 멍청하지만 jquery를 처음 사용하는 경우 사과드립니다.

상단에 두 개의 버튼이있는 가로 스크롤이있는 웹 페이지가 있습니다. 오른쪽으로 스크롤하는 버튼은 완벽하게 작동하지만 왼쪽으로 스크롤 된 버튼은 무엇이든 상관없이 항상 페이지의 시작 부분으로 이동합니다. 내 코드가 무엇이 잘못 됐는지 궁금 하네!

웹 페이지 : http://alicelanyang.com/richardhyatt/women.html

스크립트는 화살표 버튼은 스크롤 하나 인 상태이며, 오른쪽 스크롤이 남아있는 한 화살표 버튼을 왼쪽 : 어떤 도움에 감사드립니다

$(document).ready(function() { 
    var bodyWidth = $("body").width(), 
    wWidth = $(window).width(), 
    step = 400, 
    arrowButton = $("#arrow-button"), 
    pos = 0; 

arrowButton.click(function() { 
if (pos < bodyWidth) { 
    pos += step; 
} else { 
    pos = 0; 
} 

console.log(pos); 

$('body').animate({ scrollLeft: pos }, 1000); 
    }); 

$(document).ready(function() { 
    var bodyWidth = $("body").width(), 
    wWidth = $(window).width(), 
    step = -400, 
    arrowButton = $("#arrow-button-left"), 
    pos = 0; 

    arrowButton.click(function() { 
if (pos < bodyWidth - wWidth) { 
    pos += step; 
} else { 
    pos = 0; 
} 

console.log(pos); 

$('body').animate({ scrollLeft: pos }, 1000); 
    }); 
}); 

을!

Answer 1

오류는 if else 조건에있는 것 같습니다.

if (pos < bodyWidth - wWidth) { 
    pos += step; 
} else { 
    pos = 0; 
} 

항상 왼쪽 화살표를 치면서 초기 위치로 돌아갑니다. pos = 0에서 pos -= step으로 바꿀 수 있습니다.

Answer 2

다음과 같이 시도해 볼 수 있습니다. https://jsfiddle.net/4yberkho/1/

는 고정 된 값을 스크롤 할 것입니다 경우 단순히 증가 또는 값의 감소에 의해 몸을 애니메이션 할 수

arrowButtonLeft = $("#arrow-button-left"); 

arrowButton = $("#arrow-button"); 

// Right arrow click 
arrowButton.click(function(){ 

    // Animate the body to scroll right 400px 
    $('body').stop().animate({ scrollLeft: '+=400px' }, 1000); 

}); 

// Left arrow click 
arrowButtonLeft.click(function(){ 

    // Animate the body to scroll left 400px 
    $('body').stop().animate({ scrollLeft: '-=400px' }, 1000); 

}); 

Answer 3

는 POS 변수에 대한 가능한 해결책은에 따라 변경되는 여기 단계 및 상대 위치.

$(document).ready(function() { 
 
var pos = 0; 
 
var step = 400; 
 
var bodyWidth = $("body").width(); 
 
var wWidth = $(window).width(); 
 
var nextArrowButton = $("#arrow-button"); 
 
var backArrowButton = $("#arrow-button-left"); 
 

 
nextArrowButton.click(function() { 
 
\t \t if (pos < bodyWidth) { 
 
    \t \t pos += step; 
 
\t \t } else { 
 
    \t \t pos = 0; 
 
\t \t } 
 
\t \t console.log(pos); 
 
\t $('body').animate({ scrollLeft: pos }, 1000); 
 
    }); 
 

 
backArrowButton.click(function() { 
 
\t \t if (pos < bodyWidth) { 
 
    \t \t pos -= step; 
 
\t \t } else { 
 
    \t \t pos = 0; 
 
\t \t } 
 
\t \t console.log(pos); 
 
\t \t $('body').animate({ scrollLeft: pos }, 1000); 
 
    }); 
 
});