Prevent Fancybox from Jumping to the Top of the Page

Prevent Fancybox from Jumping to the Top of the Page

I’m currently building a custom WordPress theme based off of the wonderful Starkers theme and tried setting up a Fancybox gallery to show off some good looking photos.

The fancybox was coming up just fine, but for some reason, it kept kicking the page behind the overlay to the top, almost as if I were clicking an empty anchor tag. It turns out that the included reset.css file had a property on the html selector that was conflicting with the Fancybox plugin.

That overflow-y: scroll; is in place so that any vertical resizing of the page is handled gracefully, so I didn’t want to take that out.

Luckily, I found a fix that used a native helper of the Fancybox plugin called overlay.

After adding this helper, everything played nicely with the reset.css and I was able to go back to making beautiful galleries without wanting to kill a puppy.


Leave a comment
  1. امیر

    November 20, 2017 at 5:34 am

    really helpful

  2. Josephus Tabby

    August 14, 2018 at 2:43 pm

    This really answered my problem, thank you!

Reply Cancel