Question

我有一个由ajax调用填充的div。我猜不到我可以将scrollTop（）滚动到div，因为dom的高度为0。

每次加载内容时，如何动态获取div的顶部并滚动（动画）到顶部？

    $.ajax({
        cache: false,
        url: 'content/'+u+'/this.content.php',
        data: { 'data-set-id' : t},
        type: 'post',
        success: function(e) {
            $('#div .content').fadeOut(function() {
                $(this).html(e).fadeIn();                  

            });
            // scroll to top of the populated div
        },
        error: function(e) {
            // error 
        }
    }); // ajax

Answer 1

您可以在成功回调中使用此代码，以便在加载内容后滚动到div的顶部。

var stop = $('#div .content').scrollTop(); $('html, body').animate({ scrollTop: stop }, 'slow');

我希望这有帮助！

Answer 2

$("#div").animate({scrollTop: "0px"});

不起作用？

其他人偶然发现了这一点，这是一个小提琴：

http://jsfiddle.net/2z3fx3j5/1/

<body>
    <div>Hello</div>
</body>

$(document).ready(function() {
    $("body").animate({scrollTop: "1000px"}, 2000);
    $("body").animate({scrollTop: "0px"}, 2000);
});

div {
    bordeR: solid 1px black;
    height: 2000px;
}

Answer 3

Mutation-Observers是处理手头问题的唯一方法，在页面底部添加以下代码：

<script>
var target = $("#div .content");
// Create an observer instance
var observer = new MutationObserver(function( mutations ) {
   mutations.forEach(function( mutation ) {
   var newNodes = mutation.addedNodes; // DOM NodeList
if( newNodes !== null ) { 
    // If there are new nodes added
      $('#div .content')animate({ scrollTop: 0 }, 'slow'); 
      }
   });    
});

// Configuration of the observer:
var config = { 
attributes: true, 
childList: true, 
characterData: true 
};

// Pass in the target node, as well as the observer options
observer.observe(target, config);
</script>

Answer 4

你可以这样做：

success: function(e) {
            $('#div .content').fadeOut(function() {
                $(this).html(e).fadeIn();

             $('html, body').animate({
                          scrollTop: $(this).offset().top
              }, 1000);                  

            });

        }

Answer 5

通过在$ .ajax

之前重置DOM的内容来解决它

$('#div .content').empty(); 
$.ajax({
    cache: false,
    // ...
});

或

$('#div .content').html('loading...');
$.ajax({
    cache: false,
    // ...
});

这个答案是2017年末七年：）

$ .ajax调用和获取/滚动到div的顶部

5 个答案: