javascript - HTML5 jQuery .animate()({scrollTop : }); not working as intended

Question

我正在使用 XDK 编写我的第一个基于 HTML5 的应用程序。我已经成功地将它连接到一个简单的基于本地 .vb 的 Web 服务以进行模拟用户登录验证。成功登录后，我希望将新的 div 加载到 View 中，以便我在应用程序中的导航在外观和感觉上保持一致。

从主页执行的导航工作如下:

<ul class="list widget uib_w_3 d-margins" data-uib="app_framework/listview">
  <li class="widget uib_w_4" data-uib="app_framework/listitem">
     <a class="icon user" href="#login_page">Login
     </a>
  </li>
  <li class="widget uib_w_5" data-uib="app_framework/listitem">
    <a class="icon pencil" href="#register_page">Register
    </a>
  </li>
  <li class="widget uib_w_6" data-uib="app_framework/listitem">
    <a class="icon settings" href="#settings_page">Settings
    </a>
  </li>
  <li class="widget uib_w_7" data-uib="app_framework/listitem">
    <a class="icon paper" href="#acc_management_page">Acc Managment
    </a>
  </li>
  </ul><span class="uib_shim"></span>

上面的一切都很好，并且符合预期。单击/触摸登录按钮后，您将被带到 login_page，并且您有一个用于输入 username 和 password 的输入字段。登录由 jQuery 脚本处理，该脚本通过 vb.net Web 服务验证信息。登录验证按预期工作。当用户输入他们的username 和password 时，他们点击 Login 按钮并且 onClick 事件调用 jQuery 脚本，如下所示:

function verifyInfo(){
    var uName=document.getElementById("l_username").value;
    var pWord=document.getElementById("l_password").value;           
    $.ajax(  
    {  
        type: 'POST',
        url: 'http://localhost/TestWebService/Verify.asmx/UserVerify',
        data: "{ \"username\":\""+uName+"\",\"password\":\""+pWord+"\"}",
        contentType: 'application/json; charset=utf-8',
        dataType: 'json',
        success: function(data) {
            if(data.d == "true"){
                alert("Correct Login Credintials");
            }
            else{
                alert("Incorrect Login Credintials");
            }
            alert(data.d);},
        error: function(data){alert('Failed on :'+data.d);}
    });            
}

为了实现我想要的功能，我在这个脚本中添加了以下部分:

function verifyInfo(){
    var uName=document.getElementById("l_username").value;
    var pWord=document.getElementById("l_password").value;           
    $.ajax(  
    {  
        type: 'POST',
        url: 'http://localhost/TestWebService/Verify.asmx/UserVerify',
        data: "{ \"username\":\""+uName+"\",\"password\":\""+pWord+"\"}",
        contentType: 'application/json; charset=utf-8',
        dataType: 'json',
        success: function(data) {
            if(data.d = "true"){
                alert("Correct Login Credintials");

                //Added functionality
                $('html,body').animate({
                    scrollTop: $("#acc_management_page").offset().top
                });
                //End of added functionality

            }
            else{
                alert("Incorrect Login Credintials");
            }
            alert(data.d);},
        error: function(data){alert('Failed on :'+data.d);}
    });            
}

如果我理解正确的话，这应该触发动画调用以导航到适当的 div，在我们的例子中是 acc_management_page。这种导航方法在我的导航菜单中工作正常，但在脚本中不起作用。登录验证所有警报都按预期触发，但 acc_management_page 永远不会滚动到。任何建议和/或解决方案将不胜感激。

谢谢!

Answer 1

您是否尝试向 anchor 标记添加“id”属性。 jQuery 寻找的是 id 而不是 href。