使用jquery锚定到某个overlay div

So I have a site, and on click I need it to show overlay div, plus scroll to certain div on that overlay div.

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

This is what I have:

这就是我所拥有的:

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

So when the user clicks on .mcl-title, it shows the overlay-container, which covers the entire page, and I need it to move to .spm-mcl class in the middle of that overlay.

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

Any thoughts?

1 个解决方案

#1

Your issue is that you are adding your event to a link. Default behaviour is to navigate to that anchor on the page which doesnt exist so you get the top of the page.

您的问题是您要将活动添加到链接中。默认行为是导航到页面上不存在的锚点,以便您获得页面顶部。

When you click: <a class="item_download button_large news-title" href="#spm-mcl">See More</a>

单击时:查看更多

It tries to navigate to an element with the ID spm-mcl. (You have not such element. You have an element with the class spm-mcl.

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

You need to call event.preventDefault(); to cancel the default link behaviour.

你需要调用event.preventDefault();取消默认链接行为。

Also, you can greatly simplify your code and use just one event handler for all the links like this:

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

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