Fancybox問題頁面錨點

我有一個Fancybox彈出窗口，但是在這個彈出窗口中，我有很多內容，並且我想在這個內容的頂部創建一些錨點以'跳轉'到特定部分彈出頁面。這可以起作用，但是無論何時點擊錨時，背景（Fancybox後面的主頁）都會跳下去。Fancybox問題頁面錨點

這看起來像一個Fancybox的bug，我無法解決它出於某種原因。有什麼解決辦法可以嘗試嗎？

我創建了一個快速的JSFiddle here。如果你點擊「某個鏈接」鏈接，你會看到錨點起作用，但是背景頁面也會跳下去 - 這就是問題所在。

注：

這隻似乎是一個bug在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; 
}

腳本

$("#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');

來源

2014-01-09 wickywills

問題不是發生在FF – Morpheus

啊，有意思。由於某些原因，我無法在這裏打開Firefox - 使我的電腦崩潰。會做一些跨瀏覽器測試。它發生在Chrome中，不幸的是，這是客戶端使用的瀏覽器！ – wickywills

你的最簡單的方法是添加autoCenter: true你的選項，如：

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

還要確保您纏繞.ready()方法中的自定義腳本

見JSFIDDLE

編輯：您還可以設置助手locked到true所以在後臺頁面將不會滾動

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

查看更新JSFIDDLE

來源

2014-01-09 18:27:56 JFK

儘管如此，但我認爲這與我將要得到的一樣接近。在其他瀏覽器中不會發生，所以應該可以。謝謝:) – wickywills

@wickywills：請參閱我的編輯 – JFK

欣賞它，但點擊鏈接後仍會跳轉（在Chrome中）。雖然當fancybox被關閉時，它又回到頂端，所以這是可以接受的imo :) – wickywills

Fancybox問題頁面錨點

回答

相關問題