Question

我使用的是基于jQuery的lightbox_me脚本。由于我的灯箱链接位于我的页面底部，因此当有人点击打开灯箱的链接时，我希望滚动到顶部效果。所以基本上灯箱会显示在父页面的顶部。

我已经设置了一个干净的演示，可以在这里找到：http://lyesdehili.com/LightBox.html

$(function () {
    function launch() {
        $('#sign_up').lightbox_me({
            centered: true,
            onLoad: function () {
                $('#sign_up').find('input:first').focus()
            }
        });
    }

    $('#try-1').click(function (e) {
        $("#sign_up").lightbox_me({
            centered: true,
            preventScroll: true,
            onLoad: function () {
                $("#sign_up").find("input:first").focus();
            }
        });

        e.preventDefault();
    });


    $('table tr:nth-child(even)').addClass('stripe');
});


<div style="width:965px; height:1400px; background:#fff">
    <p>Scroll down the page to find the  lightbox link</p>
</div>
<a class="try sprited" id="try-1" href="#">Click to open lightbox</a>
<div style="display:none; height:350px; width:400px; background:#ccc;" id="sign_up">
    <h3 id="see_id" class="sprited" >Can I see some ID?</h3>
    <span>Please sign in using the form below</span>
    <div id="sign_up_form">
        <label><strong>Username:</strong> <input class="sprited"/></label>
        <label><strong>Password:</strong> <input class="sprited"/></label>
        <div id="actions">
            <a class="close form_button sprited" id="cancel" href="#">Cancel</a>
            <a class="form_button sprited" id="log_in" href="#">Sign in</a>
        </div>
    </div>
    <h3 id="left_out" class="sprited">Feeling left out?</h3>
    <span>Don't be sad, just <a href="#">click here</a> to sign up!</span>
    <a id="close_x" class="close sprited" href="#">close</a>
</div>

Answer 1

$('#try-1').click(function(e) {
    $('body').scrollTop(0);
    $("#sign_up").lightbox_me...; // continue with your code here
});

添加scrollTop语句以滚动到页面的开头。

打开时如何制作带有滚动效果的灯箱？

1 个答案: