当文本出现在屏幕上时自动向下滚动

Question

我正在逐字逐句地展示一首诗(使用lettering.js和jQuery.这很好.现在我想添加一个额外的功能:我希望页面向下滚动,因为文本出现在屏幕上.我正在尝试:

div.lettering('words');
div.find('span').hide();
div.show().find('span').each(function(i) {
    $(this).delay(delay * i).fadeIn(fadeIn);
    var _this = $(this);
    $('html, body').scrollTop(
        _this.offset().top - $('html, body').offset().top + $('html, body').scrollTop()
    );
});

还尝试过:

div.lettering('words');
div.find('span').hide();
div.show().find('span').each(function(i) {
    $(this).delay(delay * i).fadeIn(fadeIn);
    var _this = $(this);
    $('html, body').animate({
        scrollTop: _this.offset().top
    }; 500);
});

但页面在页面加载时滚动到某个位置,就是这样.我觉得我使用的_this变量不正确.

知道如何实现我的目标吗？

Answer 1

如果您要将内容直接添加到您的身体,并且随着元素的添加动态更改您的身体高度,则需要执行此操作.

div.show().find('span').each(function(i) {
    $(this).delay(delay * i).fadeIn(fadeIn,function(){
    var _body = $("body");
      _body.animate({
         scrollTop: document.body.scrollHeight;
      }; 500);
    });
});

在你的情况下发生的是立即发生的向下滚动的动画,这是不需要的,这样做可以确保只有在淡入动画完成时才会发生向下滑动动画.

否则,如果您不直接向您的身体添加内容,您仍然可以使用应用于外部和内部的相同技术来执行此操作.