Magnific Popup 自动滚动正文内容

Question

我有Magnific Popup installed on this website.

每次单击缩略图启动灯箱时，背景中的正文内容都会稍微向下滚动。有什么办法可以阻止这种情况发生吗？

我感觉灯箱脚本以某种方式干扰了我滚动到顶部的代码：

    // Magnific Popup open inline content
    $('.open-popup-link').magnificPopup({
        type:'inline',
        midClick: true
    });

    // Magnific Popup open iframe content
    $('.vimeolink').magnificPopup({
        type: 'iframe',
    });

    // Smooth scrolling - https://css-tricks.com/snippets/jquery/smooth-scrolling/
    $('a[href*=#]:not([href=#])').click(function() {
        if (location.pathname.replace(/^\//,'') == this.pathname.replace(/^\//,'') && location.hostname == this.hostname) {
            var target = $(this.hash);
            target = target.length ? target : $('[name=' + this.hash.slice(1) +']');
            if (target.length) {
                $('html,body').animate({
                    scrollTop: target.offset().top
                }, 1000);
                return false;
            }
        }
    });

    // Scroll to top - http://www.paulund.co.uk/how-to-create-an-animated-scroll-to-top-with-jquery
    $(window).scroll(function(){
        if ($(this).scrollTop() > 100) {
            $('.scrollToTop').fadeIn();
        } else {
            $('.scrollToTop').fadeOut();
        }
    });

    // Click event to scroll to top
    $('.scrollToTop').click(function(){
        $('html, body').animate({scrollTop : 0},800);
        return false;
    });

Answer 1

$('a[href*=#]:not([href=#]') 匹配被点击的图像，例如 <a class="open-popup-link" href="#popup-183">。所以是的，当您单击图像时，不仅会显示弹出窗口，而且页面会滚动到 URL 中的散列，在这种情况下 a#projects.

您可以通过添加 class 来区分锚点 <a> 和图像 <a>，例如：

<a class="scroller" href="#whatever"></a>

<a class="open-popup-link" href="#popup-183">

现在使用他们的 class 来定位他们：

$('a.scroller').click(function() { /* scrolling stuff */ }

Answer 2

您也可以尝试使用 Featherlight。此插件不使用 link 中的 href 属性来显示内容，因此您不会遇到该问题。它也更易于使用，并且他们的文档更好 (IMO)。

Magnific Popup 自动滚动正文内容

Magnific Popup auto scrolls body content

jquery

magnific-popup