Javascript 引导映像库始终在页面顶部打开

我在用电话。我已将其容器放置在Index.cshtml页面的底部：

<div id="blueimp-gallery" class="blueimp-gallery blueimp-gallery-controls">
    <div class="slides"></div>
    <h3 class="title"></h3>
    <a class="prev">‹</a>
    <a class="next">›</a>
    <a class="close">×</a>
    <a class="play-pause"></a>
    <ol class="indicator"></ol>
</div>

位置：固定

和

顶部：0

，

右侧：0

，

底部：0

，

左侧：0

与库始终在页面顶部打开有关

---

有没有一种方法可以让用户在页面上的正确位置打开图库，这样当用户关闭图库时，它会将用户返回到其原始位置？或者有没有办法知道用户在页面上的位置，并在库关闭后将其返回到该位置

很难复制您的特定问题，但您可以尝试这种性质的东西：

.blueimp-gallery{
position:fixed;
top:50%; 
left:50%;
width:80%;  /* adjust as per your needs */
height:80%;   /* adjust as per your needs */
margin-left:-40%;   /* negative half of width above */
margin-top:-40%;   /* negative half of height above */
}

---

让我知道这是否有效。

我尝试了不同的引导库，但遇到了相同的问题：。这一定与页面上的其他逻辑有关。切换回Blueimp Gallery，并使用这个乱七八糟的东西，让用户相信他们停留在页面上的同一位置

将DIV添加到页面：

<div id="overlay"></div>

通过jQuery使用Blueimp API来显示/隐藏此分区。此外，在库的打开（在库将用户发送到页面顶部之前触发）检测用户的位置（

scrollTop

）。然后使用在库关闭之前触发的

onclose

，滚动到页面上的该位置。我不得不使用

animate（）

函数；由于某种原因，常规的

scrollTop

不起作用

所有这些都进入

$（窗口）。load（）

函数：

var scrollPosition; 
$('#blueimp-gallery')
    .on('open', function (event) {
        // Gallery open event handler
        $('#overlay').show();
        scrollPosition = $(window).scrollTop();
    })
    .on('opened', function (event) {
        // Gallery opened event handler
    })
    .on('slide', function (event, index, slide) {
        // Gallery slide event handler
    })
    .on('slideend', function (event, index, slide) {
        // Gallery slideend event handler
    })
    .on('slidecomplete', function (event, index, slide) {
        // Gallery slidecomplete event handler
    })
    .on('close', function (event) {
        // Gallery close event handler

        $('html, body').animate({
            scrollTop: scrollPosition
        }, 600, function () {
            $('#overlay').hide();
        });
        //$('html').scrollTop(scrollPosition);
    })
    .on('closed', function (event) {
        // Gallery closed event handler
    });

---

希望这对其他人有所帮助。

所有这些解决方案都像是权宜之计，我对blueimp gallery也有同样的问题，最后我意识到这是因为库在默认情况下隐藏了页面滚动条，当你打开它时，它会直接进入顶部

因此在选项集中

hidePageScrollbars:false

初始化库时：

blueimp.Gallery(links,{hidePageScrollbars:false});

---

谢谢，@Kinburn101，谢谢你的代码，但图库仍然跳转到页面顶部。现在它只显示了画廊的下半部分；其余部分在页面顶部的视图之外。我一定是遗漏了一些在您发布的代码中不明显的内容。如果看不到一个工作模型来显示由各种来源分配给

.blueimp gallery

的初始属性，就很难确定冲突在哪里。感谢@Kinburn101的快速回复。您可以转到此处获取一个工作示例：。单击“我们的故事”菜单项，然后选择“按”选项卡，然后向下滚动至“婴儿杂志”项目并单击其中一个图像。我不是javascript和jquery最强大的，但在

blueimp gallery.js

文件中，您可能希望调查此

//将取消默认操作的事件对象//在库初始化时（例如，单击打开库的事件）：事件：未定义，

您应该寻找一种方法来防止单击打开库的锚定标记的默认操作。

#overlay {
    background-color:#000; 
    width:100%; 
    height:100%; 
    position:fixed; 
    top:0; 
    bottom:0; 
    right:0; 
    left:0; 
    z-index: 999999; 
    display:none;
}

var scrollPosition; 
$('#blueimp-gallery')
    .on('open', function (event) {
        // Gallery open event handler
        $('#overlay').show();
        scrollPosition = $(window).scrollTop();
    })
    .on('opened', function (event) {
        // Gallery opened event handler
    })
    .on('slide', function (event, index, slide) {
        // Gallery slide event handler
    })
    .on('slideend', function (event, index, slide) {
        // Gallery slideend event handler
    })
    .on('slidecomplete', function (event, index, slide) {
        // Gallery slidecomplete event handler
    })
    .on('close', function (event) {
        // Gallery close event handler

        $('html, body').animate({
            scrollTop: scrollPosition
        }, 600, function () {
            $('#overlay').hide();
        });
        //$('html').scrollTop(scrollPosition);
    })
    .on('closed', function (event) {
        // Gallery closed event handler
    });

blueimp.Gallery(links,{hidePageScrollbars:false});