Question

我有以下JavaScript代码：

var conv = new Markdown.Converter();
function getData(category, $target) {
    window.location.hash = category;
    $.ajax({
        url: category + ".txt",
        dataType: "text",
        type: 'GET',
        error: function (x, s, d) {
            console.log(x);
        },
        success: function (d, s, x) {
            var data = conv.makeHtml(d);
            $target.html(data);
        },
        complete: function () {
            console.log($('#' + category));
            $('html').animate({
                scrollTop: $('#' + category).scroll().top
            }, 'slow');
        }
    });
}
$(document).ready(function () {
    var
        curr = "",
        h = window.location.hash;
    if (h !== "") {
        h = h.toLowerCase()
        h = (h.charAt(0) == '#') ? h.substr(1) : h;
        curr = h;
        getData(h, $result);
    }
    $('ul > li').on('click', function (e) {
        var
            $result = $('#content'),
            type = $(this).data('id');
        if (curr !== type) {
            getData(type, $result);
            curr = type;
        }
    });
});

且category + '.txt'个文件包含一些包含自定义<a id="category" />细分的降价文字。

降价内容在浏览器中正常加载，但AJAX调用中的complete部分未滚动到新创建的div和内容。

Opera Dragonfly在控制台中报告以下内容：

Object [<a id="general"/> ]

但不会发生滚动动画。如果我从控制台执行相同的动画功能，则会进行滚动。

这种行为可能是什么原因？

PS ：滚动不会在任何浏览器中进行。所以，它不是特定的浏览器（已弃用的Opera）问题。

Answer 1

未经测试，但根据我的经验，您需要对当前的滚动脚本进行以下调整：

// Scroll both html and body
$('html, body').animate({
    // Grab the offset (position relative to document)
    scrollTop: $('#' + category).offset().top
  }, 'slow');

ajax完成后滚动到新创建的div

1 个答案: