Question

请有人帮我解决这个问题。请找到下面的小提琴链接，以便您了解实际需要。

$(document).ready(function(){
  $('a.n-stand-b, a.n-stand-a, a.e-stand-b, a.e-stand-a, a.w-stand-b, a.w-stand-a, a.s-stand-b, a.s-stand-a').click(function()      {
    $('[class*="b-"]').removeClass(function(index, className) {
      return (className.match(/(^|\s)b-\S+/g) || []).join(' ');
    });
    var stand_class= $(this).attr('class');
    $('div.'+stand_class).hide().prependTo('.container-right-column .container-right').slideDown(1000);
    $('div.'+stand_class).addClass('b-'+stand_class);
  });
});

https://jsfiddle.net/oz2k1xav/2/

现在，当我点击左侧的体育场时，任何一个阻挡，因此在右侧栏中，它会向下滑动到右侧容器的顶部。

向下滚动页面后，我将左侧容器位置固定，右侧容器可滚动。点击任何体育场，只能在容器顶部显示正确的容器块。

但是当我向下滚动然后点击左侧容器体育场区块时，我真正想要的是，右侧容器块应该显示在可见窗口中而不是右侧容器的顶部。

请有人帮我解决它真的很需要......请告诉我。

由于

Answer 1

您提供的解决方案会将所需元素添加到容器中，这就是它始终位于顶部的原因。你需要的是滚动到所需的元素，

我在下面的jsfiddle中添加了一个jquery plugin(scrollTo)，它完成了这项工作

https://jsfiddle.net/oz2k1xav/3/

这些是修改过的行

    //$('div.'+stand_class).hide().prependTo('.container-right-column .container-right').slideDown(1000);

    $.scrollTo($('div.'+stand_class)[0], 1000, {
    offset: -100
    });

如何通过单击另一个块

1 个答案: