Question

所以我一直试图弄清楚这一段时间，似乎无法得到它。

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

当您点击时，它有时会一直滑回窗口的开头（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)")的内容以及其他一些类似的可能解决方案，但错误仍然存在。

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

感谢。

Answer 1

原来我在另一个JS文件中有一段剩余的代码。很抱歉浪费你的时间，这就是为什么它搞砸了。

我很欣赏你的答案。

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

你可以尝试一下吗？

Answer 3

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

Answer 4

首先，我可以建议Arial Flesler的scrollTo插件吗？它很棒，像魅力一样。

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

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

我一直使用这个插件超过一年，没有发现任何问题。

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

动画卷轴非常多动

4 个答案: