Magnific Popup Conflict

[ghost]

I have a JS conflict occurring and cannot figure it out. (desktop browsers only)

My site is a one page layout that uses smooth scroll to move from section to section.

There are 4 scripts in particular that I believe are conflicting.

The problem is once I click an image to open it, the page bounces right back to the top instead of staying where it is. After closing the image popup, I have to scroll back down every time. You will also notice that after closing the popup image, clicking any nav button at the top forces a scroll from the top down and not from the current position (as shown earlier in the video).

This problem is even worse in Safari (Firefox does not do this part) as the active nav items do not display (green highlight) after closing a popup image.

Please have a look at a video screen grab I posted of the issue I am having.

http://whataprettyface.ca/video2.html

I have the Filterizr / Magnific Popup / Portfolio working perfectly on my mobile site. But the mobile site does not include the smooth scroll feature.

As mentioned above, I am using:

1) Magnific Popup v1.1.0 (Pops open images in forefront)

http://whataprettyface.ca/desktop/js/jquery.magnific-popup.js

2) J.Query Filterizr (arranges selected photo gallery)

http://whataprettyface.ca/desktop/js/jquery.filterizr.js

3) My 'Scripts' main JS (contain smooth scroll code)

http://whataprettyface.ca/desktop/js/scripts.js

4) And a 'portfolio" script:

$(function(){ 'use strict';

// portfolio filter container $('.filtr-container').filterizr('filter', '1');

// portfolio filter $('.simplefilter li').click(function() { $('.simplefilter li').removeClass('active'); $(this).addClass('active'); });

// portfolio image-popup $(".image-popup").magnificPopup({ type: "image", removalDelay: 300, mainClass: "mfp-fade" });

});

I have tried this on my phone (iPhone) and the issue was non existent. I then set the user agent on my laptop safari to iPad and the issue was also non existent. So the problem (somehow) is only occurring on desktop browsers...

I feel like the answer is before my eyes but I am a novice.

Any help is greatly appreciated!

[bernard-leech]

I tested only in Chrome, but this change in your scripts.js seemed to fix the scrolling for me:

smothScrollEls.on("click", function (e) {
  var anchor = $(this);
  bodyRef.stop().animate({
   scrollTop: $('body').scrollTop() + $(anchor.attr('href')).offset().top - 50
   }, 1000);
  console.log('hi');
  e.preventDefault();
  });

Maybe this is a question best answered on Stack Overflow?

[tiesont]

Maybe this is a question best answered on Stack Overflow?

Assuming this is just an implementation error, I would definitely say "yes," but that's just my two cents.