Question

所以我有一个网站，点击后我需要它来显示重叠div，再滚动到该重叠div上的某个div。

这就是我所拥有的：

$(".mcl-title").click(function() {
    $("body").addClass("modal-on");
    $(".overlay-container").show();
    $('html,body').animate({scrollTop: $(".spm-mcl").offset().top}, 'slow');
});

因此，当用户点击.mcl-title时，它会显示覆盖整个页面的覆盖容器，我需要它在该覆盖的中间移动到.spm-mcl类。

有什么想法吗？

Answer 1

您的问题是您要将活动添加到link。默认行为是导航到页面上那个不存在的锚点，这样你就可以获得页面的顶部。

点击： <a class="item_download button_large news-title" href="#spm-mcl">See More</a>

它尝试导航到ID为spm-mcl的元素。（你没有这样的元素。你有一个class spm-mcl的元素。

您需要致电event.preventDefault();取消默认链接行为。

此外，您可以大大简化代码，并为所有链接使用一个事件处理程序，如下所示：

Working jsFiddle

<a class="item_download button_large news-title" data-scroll-target=".spm-mcl" href="#">See More</a>



$(document).on('click', '[data-scroll-target]', function(event) {
  event.preventDefault(); // stop default link navigation
  var $this=$(this); // the clicked button
  var target=$this.data('scroll-target');
  $("body").addClass("modal-on");
  $(".overlay-container").show();
  $('html,body').animate({
    scrollTop: $(target).offset().top},
    'slow');
});

使用jquery锚定到某个overlay div

1 个答案:

Working jsFiddle