Question

我有fancybox 2.0+使用内联隐藏的html div，我试图在html区域内有一个链接转到页面底部

所以打开了fancybox我需要在花式框内的链接滚动到fancybox的底部

我试过

jQuery('.fancybox-wrap').animate({  scrollTop: jQuery("#lpsubmit").offset().top  }, 2000);

和

jQuery('html,body').animate({  scrollTop: jQuery("#lpsubmit").offset().top  }, 2000);

Lpsumbit（按钮的id）是底部的按钮，用户需要点击上面的两个似乎对我有用。如果有人做过类似的事情，那将是一个很好的帮助

Jsfiddle http://jsfiddle.net/rigids/ps8J8/1/

EDIT http://jsfiddle.net/fG4eT/2解释了我的实际问题，对不起前面的问题解释，因为我认为它可以解决滑落问题与我需要的幻灯片问题相矛盾的实际目的

Answer 1

我不知道你是否发现了这个问题。但这是我的看法。

主要问题是fancybox使用CSS属性position: fixed;来显示叠加层，并在显示时将overflow: hidden;添加到<body>，这会锁定您的页面并阻止其滚动正常。

解决此问题的方法是滚动fancybox的容器而不是页面。

这是demo。

jQuery('#anyID').click(function () {
    jQuery('#scrolltobottom').slideToggle('2000', function () {
        $(".fancybox-overlay-fixed").animate({
            scrollTop: $(document).height()
        }, 2000);
    });
    return false;
});

Answer 2

首先，您不能在同一个html文件中使用多个相同的ID。您可以使用animate属性使其正常工作。这是jsfiddle Demo

$("#scrolltobottom").click(function(e){
    $("html, body").animate({ scrollTop: $(document).height() }, 5000);
});

Answer 3

我想你想在$('.fancybox-overlay')上使用jQuery scrollTop。

动画：

$('#link').click(function () {
    $('.fancybox-overlay').animate({
        scrollTop: (($('.fancybox-wrap').outerHeight() - $('.fancybox-overlay').outerHeight()))
    }, 1000);
});

非动画：

$('#link').click(function () {
    $('.fancybox-overlay').scrollTop((($('.fancybox-wrap').outerHeight() - $('.fancybox-overlay').outerHeight())));
});

Answer 4

以下是基于你的小提琴（http://jsfiddle.net/fG4eT/2）的答案：

$("#anyID").click(function() {
    var container = $('.fancybox-overlay');
    var scrollTo = $("#scrolltobottom");

    // Or you can animate the scrolling:
    container.animate({
        scrollTop: scrollTo.offset().top - container.offset().top + container.scrollTop()
    }, 5000);
    return false;
});

在小提琴叉中：http://jsfiddle.net/AB4Yh/12/

fancybox移动到页面底部

4 个答案: