スクロールボタンをスクロールして右ボタンをスクロールする

Question

この質問がばかだがjqueryを初めて使うと謝罪します。

私は2つのボタンを上に移動する水平スクロールのウェブページを持っています。右にスクロールするボタンは完全に機能しますが、左にスクロールしたボタンは常にページの先頭に移動します。私のコードに何が間違っているのだろうか！

ウェブページ：

$(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); 
    }); 
}); 

をすべてのヘルプは高く評価されています。http://alicelanyang.com/richardhyatt/women.html

スクリプトは、矢印ボタンはスクロールが左に1を右にスクロールし、矢印ボタン、左の一つであると、あります！

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); 
 
    }); 
 
});