Question

我正在逐字逐句地展示一首诗（使用letters.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);
    });
});

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

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

Answer 2

正如@Abhishek在他的回答中指出的那样，我不得不使用回调来使滚动正常工作。但是，滚动仍然无法正常工作。所以我最终使用了Abhishek的代码和scrollTo插件：

div.lettering('words');
div.find('span').hide();
$.scrollTo('h3', {duration:500});
div.show().find('span').each(function(i) {
    var _this = $(this);
    $(this).delay(delay * i).fadeIn(fadeIn,function(){
        $.scrollTo(_this, {duration:100} );
    });
});

动画并不像我想要的那样流畅，因为duration: 100有点太快了..但如果我设置了更高的值，滚动将在所有文本显示后发生，感觉有点奇怪。

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

2 个答案: