动画滚动非常错误答案

【问题标题】：animated scroll is very buggy动画滚动非常错误
【发布时间】：2011-07-23 00:14:07
【问题描述】：

所以我一直试图弄清楚这一点，但似乎无法理解。

我使用由圆圈组成的导航（见下面的网站），当用户点击一个时，它会将他/她转发到相应的幻灯片。

当您四处点击时，它有时会一直滑回窗口的开头（margin-left = 0）。如果一开始不这样做，只需单击一两秒钟，您最终就会看到它。

http://dan.stargroupdev.com/

这是有问题的代码：

$("#footer-slidenav .links a").click(function () {
  // Get nav index
  var slidenum = $(this).attr("id").slice(3);
  // Setup slide selector with string to avoid issues
  var slidetext = ".slide:eq(" + slidenum + ")";
  slidenum = $(slidetext).offset().left;
  console.log("Top: " + slidenum);
  var offset2 = 0;
  // Find window offset to center slide if screen is bigger than 1000px (size of one slide)
  if (($(window).width() - 1000) / 2 > 0) {
    offset2 = ($(window).width() - 1000) / 2;
  }
  // Slide window to slide # that was clicked
  $("html:not(:animated), body:not(:animated)").animate({
    scrollLeft: slidenum
  }, 1000, function () {
    console.log("Middle: " + slidenum);
    // Callback to center slide and give a nice little animated touch
    slidenum = $(slidetext).offset().left;
    console.log("Bottom: " + slidenum);
    $("html:not(:animated), body:not(:animated)").animate({
      scrollLeft: (slidenum - offset2)
    }, "fast");
  });
  return false;
});

我尝试了$("html:not(:animated), body:not(:animated)") 之类的方法以及其他一些类似的可能解决方案，但错误仍然存在。

任何建议都会很棒，我很乐意接受你们可能有的任何想法。

谢谢。

【问题讨论】：

检查你的变量slidenum在它不应该改变时没有改变（范围）......做类似console.log（“A--”+slidenum）; console.log("B--"+slidenum);每次为 slidenum 变量设置一个值之后。
我添加了如上所示的代码，以便您可以查看控制台。由于某种原因，它似乎调用了两次回调。
调用双重回调是因为您同时为 body 和 html 设置了动画（当您选择 html, body 时，它会选择两个元素而不是一个）。两个动画同时是邪恶的。
如果我只选择一个，它不能在所有浏览器上正常工作。我已经在不同的网站上做了一千次html,body 并且效果很好。

标签： javascript jquery html css scroll

【解决方案1】：

原来我在另一个 JS 文件中有一段剩余的代码。抱歉浪费了你们的时间，所以才搞砸了。

不过，我很感谢你的回答。

【讨论】：

【解决方案2】：

我会提出一个全新的解决方案（大部分是新的）

$("#footer-slidenav .links a").click(function () {
    var slidenum = $(this).attr("id").slice(3);
    var slidetext = ".slide:eq(" + slidenum + ")";

    offset = $(slidetext).position().left;
    console.log(offset );

    $("body").animate({
        scrollLeft: offset
    });
});

你可以试一试吗？

【讨论】：

我会在星期一试一试，但我真的不知道这有什么不同，除了它是 body 而不是 body, html，我已经尝试了一千次结束了。
另外一件事是我去掉了回调动画
我试过了。现在它只是将它返回到开头（回调至少会在它回到开头之后使其工作）。在控制台中，数字仍然是正确的。

【解决方案3】：

我的建议是在body 上测试没有front 类的站点。脚本http://dan.stargroupdev.com/sites/all/themes/starsite/js/starsite.js 使用这个类和结果来创建我认为不需要的行为。如果我用萤火虫删除它，它对我来说没问题。检查它并提供反馈，看看这是否属实。

【讨论】：

【解决方案4】：

首先我可以推荐Arial Flesler的scrollTo插件吗？太棒了，就像一个魅力。

您可以使用偏移量来使最终位置居中。

如果您想要某种缓动，那么您可以使用它们使动画看起来更自然。那么弹性动画呢？

我已经使用这个插件一年多了，没有发现任何问题。

另外，请记住 .stop() 滚动/动画元素。

【讨论】：