使用 jquery 锚定到某个叠加层 div

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 class覆盖。

有什么想法吗？

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(); 来取消默认的 link 行为。

另外，您可以大大简化您的代码，只对所有 link 使用一个事件处理程序，如下所示：

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 锚定到某个叠加层 div

use jquery to anchor to certain overlay div

html

javascript

anchor

jquery

Working jsFiddle