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

Question

I am writing my first HTML5 based app using XDK. I have successfully connected it to a simple local .vb based web service for mock user login validation. Upon a successful log in I wish to load a new div into the view so that my navigation within the app is consistent in look and feel.

Navigation being performed from the main page works as follows:

<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>

Everything above works great, and as intended. Upon clicking/touching the Login button you are taken to the login_page , and you have an input field for username and password . The login is handled by a jQuery script which verifies the information via a vb.net web service. The login verification is working as intended. Upon a user entering their username and password they click the Login button and an onClick event calls the jQuery script which is as follows:

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);}
    });            
}

To achieve the functionality that I want I have added the following piece to this script:

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);}
    });            
}

This should, if I understand it correctly, fire the animation call to navigate to the appropriate div, in our case acc_management_page . This method of navigation works fine from my navigation menu but is not working from the script. The login is validated all alerts fire as intended but the acc_management_page is never scrolled to. Any suggestions and or solutions would be greatly appreciated.

Thanks!

Answer 1

Did you try add an "id" attribute to the anchor tag. jQuery is looking for the id not a href.

Answer 2

LOOK AT THIS Demo

Works like a charm :)

 $('.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
    });
};

Also check your CSS file, if content div is not set properly (height, position fixed/relative etc) , could generate some unexpected behavior.

LOOK AT THIS Demo

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)');