CODEWITHSUNDEEP
javascriptjqueryhtmlcssfancybox
wickywills
wickywills

Reputation: 4204

Fancybox issue with page anchors

I have a Fancybox popup, however within this popup, I have a lot of content, and I would like to create a few anchors at the top of this content to 'jump' down to specific parts of the popup page. This works, however the background (the main page behind the Fancybox) appears to jump down whenever the anchor is clicked.

This seems like a Fancybox bug, and I am unable to solve it for some reason. Are there any solutions I can try?

I have created a quick JSFiddle here. If you click the "some link" link, you will see that the anchor works, however the background page also jumps down as well - this is the problem.

Note:

This only seems to be a bug in Chrome.

HTML:

<a class="fancyTrigger" href="#TheFancybox"></a>
<hr>
<div id="TheFancybox"></div>

Powered by <a href="http://fancybox.net/" target="_blank">Fancybox</a>

    <p>test</p>
    <p>test</p>
    <p>test</p>
    <p>test</p>
    <p>test</p>
    <p>test</p>
    <p>test</p>
    <p>test</p>
    <p>test</p>
    <p>test</p>
    <p>test</p>
    <p>test</p>
    <p>test</p>
    <p>test</p>
    <p>test</p>
    <p>test</p>
    <p>test</p>
    <p>test</p>
    <p>test</p>
    <p>test</p>
    <p>test</p>
    <p>test</p>
    <p>test</p>
    <p>test</p><p>test</p><p>test</p>
    <p>test</p>
    <p>test</p>
    <p>test</p>
    <p>test</p>
    <p>test</p>
    <p>test</p>
    <p>test</p>
    <p>test</p>
    v
    <p>test</p>
    <p>test</p>
      <p>test</p>
    <p>test</p>
    <p>test</p><p>test</p><p>test</p>
    <p>test</p>
    <p>test</p>
    <p>test</p>
    <p>test</p>
    <p>test</p>
    <p>test</p>
    <p>test</p>
    <p>test</p>
    v
    <p>test</p>
    <p>test</p>

      <p>test</p>
    <p>test</p>
    <p>test</p><p>test</p><p>test</p>
    <p>test</p>
    <p>test</p>
    <p>test</p>
    <p>test</p>
    <p>test</p>
    <p>test</p>
    <p>test</p>
    <p>test</p>
    v
    <p>test</p>
    <p>test</p>

    <p>test</p>

CSS:

/*  Note that the fancybox css file is loaded under the 
"Add Resources" tab to the left.  Normally you would load it in your <head> */

body {
   background-color: #eef;     
}
#TheFancybox {
    display: none;
    height:70px;
    overflow:scroll;
}

Script

$("#TheFancybox").html("<p><a href='#test'>some link</a></p><p>dsdsds2dsds</p><p>dsdsdsd1sds</p><p>dsdsdsds3ds</p><p>dsds5dsdsds</p><p>dsdsds5dsds</p><p>dsd22dsdsds</p><p>dsdsdsd2222sds</p><p>dsds111dsdsds</p><p>dsdsdsdsds</p><p>dsdsdsaaaadsds</p><p>dd2d2d3dsdsds</p><p><a name='test'></a></p><p>dsdsdsd 2 da dad a dadsds</p><p>dsdsdsdsds</p>");

$(".fancyTrigger").fancybox();
$(".fancyTrigger").trigger('click');

Upvotes: 0

Views: 1527

Answers (1)

JFK
JFK

Reputation: 41143

Your easiest option is to add autoCenter: true to your options like :

jQuery(document).ready(function ($) {
    $("#TheFancybox").html("...");
    $(".fancyTrigger").fancybox({
        autoCenter: true
    }).trigger('click');
}); // ready

Also make sure you wrap your custom script inside the .ready() method

See JSFIDDLE

EDIT : you could also set the helpers locked to true so the page in the background won't scroll at all

$(".fancyTrigger").fancybox({
    autoCenter: true,
    helpers: {
        locked: true
    }
}).trigger('click');

See updated JSFIDDLE

Upvotes: 2

Related Questions