代码之家  ›  专栏  ›  技术社区  ›  Marcus

Jquery滚动到IE7中的问题

  •  3
  • Marcus  · 技术社区  · 16 年前

    我有一个页面,它使用jQuery的scrollTo插件来管理一些功能。当您要从登录页重置密码时,它会滚动到新窗体,而不是将用户带到新页。当然,除了IE7,其他地方都可以。以下是我的HTML:

    <div id="blocksWrapper">
        <div id="blocks">
            <div id="form" class="block">
                <form id="formLogin" action="../index.html" method="post">
                    <fieldset>
                        <legend>Registered Members Log-in Here</legend>
                        <label for="formLoginEmail">Email Address</label>
                        <input type="text" id="formLoginEmail" name="formLoginEmail" value="Email Address" />
                        <label for="formLoginPassword">Password</label>
                        <input type="password" id="formLoginPassword" name="formLoginPassword" value="Password" />
                        <input type="image" src="../images/login/buttonLogin.png" value="Login" id="formLoginSubmit" name="formLoginSubmit" />
                    </fieldset>
                </form>
                <h3 id="register"><a href="#">Register</a></h3>
                <h3 id="forgot"><a href="#">Forgot Password?</a></h3>
            </div><!--end form-->
            <div id="password" class="block">
                <form id="formPassword" action="../index.html" method="post">
                    <fieldset>
                        <legend>Forgot your password?</legend>
                        <h3>Enter your Email Address to reset your password</h3>
                        <p>By selecting &lsquo;Reset Password&rsquo; you certify that the email address contained in this field is your email address.</p>
                        <label for="formPasswordEmail">Email Address</label>
                        <input type="text" id="formPasswordEmail" name="formPasswordEmail" value="Email Address" />
                        <input type="image" src="../images/login/buttonResetPassword.png" value="Reset Password" id="formPasswordSubmit" name="formLoginSubmit" />
                    </fieldset>
                </form>                                
            </div><!--end password-->
            <div id="confirm" class="block">
                <h2>Confirmation Sent</h2>
                <h3>Please check your email for instructions <br />on resetting your password.</h3>
                <p>Your confirmation email will come from donotreply@mygrizzly.com. Be sure to add this to your spam filter so you will be able to receive this email.</p>
                <h4><a href="#">Return to login screen</a></h4>
            </div><!--end confirm-->
        </div><!--end blocks-->
    </div>
    

    我的CSS(重要的是):

    .login #content #blocksWrapper {
        background: url(../images/login/bgBlock.png);
        height: 127px;
        margin: 0 0 50px 9px;
        overflow: hidden;
        padding: 20px 18px;
        width: 437px;
    }
    
    .login #content #blocks {
        height: 127px;
        overflow: hidden;
        width: 1377px;
    }
    
    .login #content .block {
        float: left;
        height: 127px;
        margin-right: 18px;
        position: relative;
        width: 441px;
    }
    

    还有我的jQuery:

    $('#forgot a').click(function() {
        $('#blocksWrapper').scrollTo({left: 459, top: 0}, 400);
        return false;
    });
    
    $('#formPasswordSubmit').click(function() {
        $('#blocksWrapper').scrollTo({left: 918, top: 0}, 400);
        return false;
    });
    
    $('#confirm h4 a').click(function() {
        $('#blocksWrapper').scrollTo({left: 0, top: 0}, 200);
        return false;
    });
    

    代码摘录就在这一页上:【修正后的修订版】

    我试过使用#块作为jQuery选择器进行测试,但这不是问题所在。

    非常感谢, 马库斯

    1 回复  |  直到 16 年前
        1
  •  2
  •   Marcus    16 年前

    .login #content #blocksWrapper {
        background: url(../images/login/bgBlock.png);
        height: 127px;
        margin: 0 0 50px 9px;
        overflow: hidden;
        padding: 20px 18px;
        position: relative;
        width: 437px;
    }