HTML5 jQuery .animate（）（{scrollTop：}）; 不能按预期工作

Question

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

从主页执行的导航如下：

<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他们单击登录按钮，然后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

您是否尝试过向锚标记添加“ id”属性。 jQuery正在寻找id而不是href。

Answer 2

看看这个演示

奇迹般有效 ：）

 $('.uib_w_4').click(function () {
alert('Now I will ask you if your login is ok ! to simulate Login Form');
if (confirm('Login with success !?')) {
    letsAnimate();
} else {
    // Do nothing!
    alert('Login Failed');
};
});
function letsAnimate() {
    $('html,body').animate({
        scrollTop: $("#acc_management_page").offset().top
    });
};

还要检查您的CSS文件，如果content div的设置不正确（高度，位置固定/相对等），则可能会产生某些意外行为。

看看这个演示

Answer 3

我遇到了同样的问题，但是最后我找到了负责滚动的div类，并设法使用css对其进行了滚动（我发现XDK滚动的实现方式相同-我只是将其重置为未滚动的参数值）：

$('.afScrollPanel').css('transform', 'matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1)');