如何强制浏览器跟随将要显示的div？

Question

页面底部的<div>或<pre>将由以下方式切换/显示：

$(document).ready(function(){
  $("#slice_img").click(function(){
    $("#slice_pre").slideToggle("slow");
  });
});

底部会出现一个文字。

如何自动追踪并关注浏览器将要显示的文字，以便用户自己不需要向下滚动才能看到新出现的文字？

• 我不想向下滚动到页面的末尾！我希望浏览器遵循确切的文本，同时慢慢向下滑动以便出现。

你可以（！）通过图片更好地理解。

Answer 1

这些方面应该有用（如果我理解的话）：

DEMO

$(document).ready(function(){
  $("#slice_img").click(function(){
    $("#slice_pre").slideToggle("slow", function() { // add a callback function to slideToggle
        $('html, body').animate({
            scrollTop: $("#slice_pre").offset().top
        }, 1000);
    });
  });
});

虽然您可能应该使用类而不是ID来使其可重用。您的代码将变为：

$(document).ready(function(){
  $(".slice_img").click(function(){
    $(".slice_pre", $(this)).slideToggle("slow", function() {
        $('html, body').animate({
            scrollTop: $(this).offset().top
        }, 1000);
    });
  });
});

DEMO