CODEWITHSUNDEEP
jquerymagnific-popup
Sam
Sam

Reputation: 1461

Magnific Popup auto scrolls body content

I have Magnific Popup installed on this website.

Every time I click a thumbnail to launch the lightbox, the body content in the background scrolls down slightly. Is there a way I can stop this from happening?

I have a feeling that the lightbox script is somehow interfering with my scroll to top code:

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

Upvotes: 0

Views: 4272

Answers (2)

Laura M
Laura M

Reputation: 11

You can also try using Featherlight. This plugin doesn't use the href attribute in a link to display the content, so you won't have that issue. It's also easier to use and their docs are better (IMO).

Upvotes: 1

Jeremy Thille
Jeremy Thille

Reputation: 26370

$('a[href*=#]:not([href=#]') matches the images that are clicked, for instance <a class="open-popup-link" href="#popup-183">. So yeah, when you click an image, not only the popup shows up, but the page scrolls to the hash in the URL, in that case a#projects.

You can differentiate <a> for anchors and <a> for images by adding a class, for instance :

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

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

Now target them using their class :

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

Upvotes: 1

Related Questions