davekiss.com

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.

html {
  font-size: 100%; 
  overflow-y: scroll; 
  -webkit-text-size-adjust: 100%; 
  -ms-text-size-adjust: 100%;
}

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.

$('.image').fancybox({
  padding: 0,
  helpers: {
    overlay: {
      locked: false
    }
  }
});

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.

Author image
About Dave Kiss
I'm a full-stack developer that started my own business and grew it to a sustainable level over the past few years. I'm happy to share my techniques, results, failures, successes, and ideas with you.