Javascript 跳转到使用ajax加载的div

Javascript 跳转到使用ajax加载的div,javascript,jquery,html,ajax,Javascript,Jquery,Html,Ajax,我有一个按字母顺序显示产品列表的页面。当用户开始滚动时,使用ajax动态加载产品 我的页面A-Z顶部有字母表列表,因此当用户单击任何字母表时,我需要将页面滚动到以该字母表开头的产品列表 如果已加载div,即如果用户已滚动并加载以D开头的产品,然后用户单击页面顶部的字母表D,则该功能可以正常工作。 如果未加载字母为D的产品列表,则我加载A-D中所有尚未加载的产品,但我无法滚动到div顶部,其中产品列表以D开头 如果任何人有任何解决问题的建议,请帮助。 提前谢谢 下面是我的javascript代码的

我有一个按字母顺序显示产品列表的页面。当用户开始滚动时,使用ajax动态加载产品

我的页面A-Z顶部有字母表列表,因此当用户单击任何字母表时,我需要将页面滚动到以该字母表开头的产品列表

如果已加载div,即如果用户已滚动并加载以D开头的产品,然后用户单击页面顶部的字母表D,则该功能可以正常工作。 如果未加载字母为D的产品列表,则我加载A-D中所有尚未加载的产品,但我无法滚动到div顶部,其中产品列表以D开头

如果任何人有任何解决问题的建议,请帮助。 提前谢谢

下面是我的javascript代码的代码片段

    $('.jump').click(function () {
    var alphabet = $(this).text();
    var jumpToId = "#" + alphabet.toUpperCase();
    var targetAlphabetAscii = alphabet.charCodeAt(0);
    if (targetAlphabetAscii >= nextAlphabet)
    {
        var current = "";
        do {
            current = GetNextAlphabet();

       //This function loads the list of products and appends 
        //to a existing div on the page.
            GetProductData(current);

        } while (current != alphabet);
    }

    //The problem is here .. I dont get the offset because till the time the following 
    //code is executed the div with the selector jumpToId is not loaded.. 
    //so I get undefined error for .offset() method and cannot scroll

    var offset = $(jumpToId).offset();
    offset.left -= 20;
    offset.top -= 20;
    $('html, body').animate({
        scrollTop: offset.top,
       scrollLeft: offset.left
     });


    });
HTML锚定,即页面顶部的字母列表如下所示


您需要添加scroll函数作为GetDataContent函数的回调。比如:

//Define scrolling function
var doScrolling = function(current){    
    var offset = $(current).offset();
        offset.left -= 20;
        offset.top -= 20;
        $('html, body').animate({
            scrollTop: offset.top,
           scrollLeft: offset.left
         });
};// end scrolling function

// now define your fetch data function
var GetProductData = function(current, isManualLoad){
        $.ajax( "example.php" ).done(function() {
            // ... append your content
           ...
           if( ! isManualLoad ){
               // and scroll to it
               doScrolling( current );
           }
        });
};

更新:根据OP的评论将标记添加到回调中

能否将空div添加到初始页面并仅放置内容?不清楚到底是什么问题。您是否在ajax中添加了跳转类链接?如果需要,则需要委派事件。如果不是,单击处理程序是否正在触发?@charlietfl:跳转类锚是静态的,并且在加载页面时加载。虽然我们想要滚动到的div是使用ajax@SGD是的,我能做到。。但是如果没有加载内容,用户被导航到页面上的空div,该怎么办呢。我想在加载内容后加载滚动。。另外,列表在鼠标滚动时动态加载您需要将滚动添加为一个函数,作为对GetProductData函数的回调执行,我假设该函数是执行ajax调用的函数-换句话说,它不能按原样工作,因为进行了ajax调用,尝试了滚动,但是来自ajax调用的响应没有插入您需要滚动的新内容,因此它还不存在