jquery - Jquery滚动到目标div水平移动

Question

我希望能够滚动我的页面，当我达到某个点时，我希望 div 水平滚动，但我似乎无法实现这一点。我有一些 jquery，当用户点击第二部分时会发出警报，但我无法让它工作，我现在只是在我的块上有一个动画，但它根本不工作......你能帮我吗？

http://jsfiddle.net/AXsMR/

Answer 1

这是你想要达到的目标吗？

http://jsfiddle.net/Mu4ug/3/

当用户向下滚动到第二个 div 时，动画开始。

Answer 2

首先，我不会使用部分标签，我会使用 DIVS。另外，我会将所有“部分”（div）放在具有指定宽度的主 div 中（以防止垂直堆叠）

然后在滚动时，我会使用 jQuery offset().left 方法来获取您希望滚动到的部分的位置（或）为偶数滚动设置预定义值，然后调用 animate 函数。

<div style='width: 4000px' id='masterDiv'>
      <div id='section1' class='innerDiv' style='width: 1000px'></div>
      <div id='section2' class='innerDiv' style='width: 1000px'></div>
      <div id='section3' class='innerDiv' style='width: 1000px'></div>
      <div id='section4' class='innerDiv' style='width: 1000px'></div>
</div>

您可以在此处确定滚动的方向 >如何确定 jQuery 滚动事件的方向？（向下滑动屏幕向右移动，向上滑动向左移动屏幕）

然后使用这样的东西..

var lastScrollTop = 0;
$(window).scroll(function(event){
   var st = $(this).scrollTop();
   if (st > lastScrollTop){
       $("#masterDiv").animate({ "left": "+=180px" }, 1000);
   } else {
      $("#masterDiv").animate({ "right": "+=180px" }, 1000);
   }
   lastScrollTop = st;
});

需要一些测试，但应该有所帮助。

Answer 3

你也可以使用这个功能......

function moveToTargetDiv(target, outer){
    var out = $(outer);
    var tar = $(target);
    var x = out.width();
    var y = tar.outerWidth(true);
    var z = tar.index();
    var q = 0;
    var m = out.find('li');

    for(var i = 0; i < z; i++){
        q+= $(m[i]).outerWidth(true)+4;
    }

    $('#tabUl').animate({
    scrollLeft: Math.max(0, q )
    }, 800);
    return false;
}

例如：https ://jsfiddle.net/dinesh10641/mvqxbjvs/