Javascript HTML5 jQuery.animate（）（{scrollTop:}）；未按预期工作

我正在使用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>

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\u management\u页面

。这种导航方法在“我的导航”菜单中运行良好，但在脚本中不起作用。登录已验证，所有警报均按预期发出，但acc_管理_页面从未滚动到。如有任何建议或解决方案，将不胜感激

谢谢

是否尝试将“id”属性添加到锚标记中。jQuery正在查找的id不是a href。

工作就像一个符咒：）

同时检查CSS文件，如果内容div设置不正确（高度、位置固定/相对等），可能会产生一些意外行为

---

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

---

我的问题含糊不清还是难以理解？我能做些什么来改进这个问题吗？这个非常简单的小提琴作品：；你能举个例子吗？@Irvindiminakadeward，我对你在声明中的意思感到困惑

你能举个例子吗？

谢谢你的帮助。注意。应该是

数据。d==“true”

@Himal yessir我在发布后修复了这个问题，但是很好的提示：）。我做了检查，但我可能已经发现了你的问题，它可能不会滚动的原因是因为页面太小，没有任何东西可以滚动。我实现了一个小提琴来向您展示我的意思，当您将HTML包装在包装器中并设置一个较大的高度值时，它会起作用。另外，jQuery正在查找id，而不是href。我今天会看这个。PalinDrome555，我有以下设置作为id，

。我还考虑了您对添加

，1000）的想法。两者都没有解决这个问题。我更进一步，将animate调用移动到一个单独的函数，正如您所做的那样，该函数只有在登录成功时才会被调用。我已经验证了在成功登录时调用函数，但是动画调用仍然没有发生。您的控制台上是否有任何错误。看看这里。
 $('.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
    });
};

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