javascript - 如何通过单击另一个 block 在可见窗口中显示 block

Question

请有人帮我解决这个问题。请在下面找到 fiddle 链接，以便您了解实际需求。

$(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/

现在，当我单击左侧体育场的任何 block 时，相应地在右侧列中，它会在右侧容器的顶部向下滑动。

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

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

请有人帮助我，这真的很需要......请告诉我。

谢谢

Answer 1

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

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

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