首页
学习
活动
专区
圈层
工具
发布
首页
学习
活动
专区
圈层
工具
MCP广场
社区首页 >问答首页 >如何使灯箱在打开时具有滚动到顶部的效果?

如何使灯箱在打开时具有滚动到顶部的效果?
EN

Stack Overflow用户
提问于 2014-04-05 01:59:46
回答 1查看 347关注 0票数 0

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

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

代码语言:javascript
运行
复制
$(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>
EN

回答 1

Stack Overflow用户

发布于 2014-04-05 02:09:11

代码语言:javascript
运行
复制
$('#try-1').click(function(e) {
    $('body').scrollTop(0);
    $("#sign_up").lightbox_me...; // continue with your code here
});

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

票数 0
EN
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接:

https://stackoverflow.com/questions/22869883

复制
相关文章

相似问题

领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档