---
title: "How to make Fancybox 2 opening at top of page"  
description: "How to make Fancybox 2 opening at top of page"  
author: "Anonymous User"  
published: 2015-01-30  
updated: 2015-01-30  
canonical: https://www.mindstick.com/forum/12920/how-to-make-fancybox-2-opening-at-top-of-page  
category: "asp.net"  
tags: ["jquery", "javascript"]  
reading_time: 2 minutes  

---

# How to make Fancybox 2 opening at top of page

I have Fancybox2 set up and working, it opens the image in the frame and has the title and the close [button as](https://answers.mindstick.com/qa/32548/do-you-ever-use-the-favorite-button-as-a-bookmark-on-twitter) i want it to. however it opens each image by scrolling right back to the top of the page. So when pressing the close button the [visitor](https://www.mindstick.com/forum/2295/how-to-count-number-of-visitors-for-website) has to scroll back down to the [images](https://www.mindstick.com/interview/1067/what-is-the-php-predefined-variable-that-tells-the-what-type-of-images-that-php-support) to [choose](https://www.mindstick.com/articles/13030/how-to-choose-the-best-online-bitcoin-casino) the next one.

The only other [Javascript](https://www.mindstick.com/articles/874/how-to-create-watermark-text-for-textbox-by-using-javascript) I have running is [Bootstrap](https://www.mindstick.com/articles/1555/image-viewer-using-bootstrap-carousel) as the site wsa built with that. Any [ideas](https://www.mindstick.com/articles/43878/making-the-best-use-of-the-options-trade-ideas) of what might be happening at all, or how to sort it out so the image opens in the same place as the image link?

**In the head I have:**

```
    <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>    <link rel="stylesheet" href="source/jquery.fancybox.css" media="screen" />    <script>      $(document).ready(function() {      $('.fancybox').fancybox({        padding : 0,        openEffect  : 'elastic'       });     });    </script>
```

**And then for image links i use:**

```
    <a href="img/addons/Advanced_filters.jpg" class="fancybox" title="Advanced Filters"><img src="img/addons/Advanced_filters.jpg" class="addon_img" /></a>
```

And all my javascript is run at the bottom of the page, with the fancybox code as:

<[script](https://www.mindstick.com/interview/477/how-can-i-execute-a-php-script-using-command-line) src="[source](https://www.mindstick.com/interview/840/what-happens-if-the-both-source-and-destination-are-named-same)/jquery.fancybox.pack.js"></script>

All of this is exactly how the instruction say to set it up

many thanks, paul.

## Replies

### Reply by Anonymous User

Try making a small change to jquery.fancybox.css: comment out the rule that says overflow: hidden !important; for .fancybox-lock

**And if that does do it, try:**

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


---

Original Source: https://www.mindstick.com/forum/12920/how-to-make-fancybox-2-opening-at-top-of-page

Copyright © MindStick Software Pvt. Ltd. This Markdown version is provided for developers, AI systems, and offline reading.