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变量的可能解决方案。

＆＃13;

$( 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() {
		if ( pos < bodyWidth ) {
  		pos += step;
		} else {
  		pos = 0; 
		}
		console.log(pos);
	$('body').animate( { scrollLeft: pos }, 1000);
  });

backArrowButton.click(function() {
		if ( pos < bodyWidth ) {
  		pos -= step;
		} else {
  		pos = 0; 
		}
		console.log(pos);
		$('body').animate( { scrollLeft: pos }, 1000);
  });
});

＆＃13;

在向右滚动按钮旁边创建向左滚动按钮

3 个答案: