Javascript 如何正确使用变量在动画功能中向左滚动

首先，提前感谢您的帮助。 第二，我想提到的是，我已经研究了与本主题相关的不同问题，并阅读了有关animate（）和scrollLeft（）的文档。我认为我的问题实际上更多地基于语法，而不是函数用法，这就是为什么其他问题对我没有帮助的原因

现在，我们来谈谈这个问题。我试图修改我之前编写的javascript代码，以便一个函数可以对任何用户的视口做出反应

在HTML方面，我有一个表，其中有一个

和三个

。3个

中充满了图片和信息，当用户单击下面的按钮时，表格会自动滚动到相应的内容。按钮很好用。问题实际上是图像比视口大（在任何设备上），因此在初始页面加载时，图像需要按与视口和资源大小成比例的距离滚动（我也会根据视口加载不同的资源）。我发现，滚动距离的公式是

0.5（assetWidth）-0.5（视口宽度）

下面是我提出的JS（都在jQuery（document）.ready（function（$）中）{

var距离；
if（$（'#交互式行：可见'）。长度==0）{
//视口>801px
var资产净值=1920；
console.log（“bouta set scrolDistance”）；
scrollDistance=（0.5*assetWidth）-（0.5*$（window.width（））；
}否则{
//视口小于800px
var资产净值=1428；
scrollDistance=（0.5*assetWidth）-（0.5*$（window.width（））；
}
//滚动至零，以便用户返回时滑块位置复位（不带变量lastClick出错）
$（'.table container'）。设置动画({
左：0
}“慢”）；
log（“滚动距离为“+滚动距离+”计算即将开始。”）；
//将滑块移动到SSI屏幕的中间
$（'.table container'）。设置动画({
scrollLeft:+=scrollDistance.valueOf（）的值
}“慢”）；

问题（我相信）在倒数第二行，我的意图是让浏览器滚动到滚动距离内的任何数字

注意：以下是firefox和chrome所说的：“SyntaxError:预期表达式，得到“+=”[了解更多信息]”

另外，我已经尝试过在不添加.valueOf（）的情况下使用scrollDistance。我最近启用了该选项，以防javascript中出现某种我不知道的类型问题

请随意看看这张图，以便更好地理解我正在尝试做什么

提前感谢您的帮助，我是Javascript新手，您能告诉我的任何事情（甚至只是关于我如何编写代码的一般提示）都非常感谢

---

编辑：我刚刚想到，可能还值得注意的是，我的console.log（）根本不工作，但如果滚动开始工作，我就不太关心这个问题了：D

scrollLeft:+=scrollDistance.valueOf（）

是一个语法错误：您是在尝试创建对象还是增量scrollLeft？我想我是在尝试增量scrollLeft。我希望.table容器按可变scrollDistance中的像素量滚动。冒号不应该在那里then@user3080953这并没有解决问题。这行代码现在读作

$（“表容器”）动画（{滚动左边+ =滚动距离.ValueOf（）}，“慢”）；<代码>不应该<代码/Value> < /Cord> >一个参数？为什么使用“0”而不是0用于ScLeLink？您的问题中的错误消息不再是当前的，请考虑一个新问题<代码> ScReLeLe:+= ScListList.ValueOf（）

是一个语法错误：您是在尝试创建对象还是增量scrollLeft？我想我是在尝试增量scrollLeft。我希望.table容器按可变scrollDistance中的像素量滚动。冒号不应该在那里then@user3080953这并没有解决问题。这行代码现在读作

$（“表容器”）动画（{滚动左边+ =滚动距离.ValueOf（）}，“慢”）；< /代码>不应该<代码> Value> < /Cord> >一个参数？为什么使用“0”而不是0用于ScLeLink？您的问题中的错误消息不再是当前的，考虑一个新问题。
var scrollDistance;

if ($('#interactive-row:visible').length == 0) {
    //Viewport > 801px
    var assetWidth = 1920;
    console.log("bouta set scrolDistance");
    scrollDistance = ( 0.5 * assetWidth ) - ( 0.5 * $( window ).width() );
} else {
    //Viewport < 800px
    var assetWidth = 1428;
    scrollDistance = ( 0.5 * assetWidth ) - ( 0.5 * $( window ).width() );
}

//scroll to zero so that whne user goes "back" slider position is reset (w/o variable lastClick gets messed up)
$('.table-container').animate({
    scrollLeft: 0
}, "slow");
console.log( "Scroll Distance is " + scrollDistance + " calculation is about to begin." );
//move slider to middle of SSI screen
$('.table-container').animate({
    scrollLeft: += scrollDistance.valueOf() 
}, "slow");