2

我正在逐字显示一首诗（使用 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 变量不正确。

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

4

2 回答 2

5

如果您将内容直接添加到您的身体，并且您的身体高度随着元素的添加而动态变化，那么您需要这样做。

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

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

否则，如果您不直接将内容添加到您的身体，您仍然可以使用应用于外部和内部的相同技术来完成。

于 2012-12-20T04:24:58.697 回答
0

正如@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有点太快了。但是如果我设置一个更高的值，滚动会在所有文本都显示后发生，感觉有点奇怪。

于 2012-12-20T08:15:38.730 回答