javascript - 如何在下一张幻灯片时使轮播平滑滚动到顶部并使用 'hand carousel'

Question

我使用 carousel bootstrap 3 来使用幻灯片文本。当第 1 行文本长到底部(例如:高度 300 像素)而第 2 行文本太短(例如:仅 10 像素)时，问题是当我们单击第 # 行旁边时，我们总是必须手动滚动到顶部2 来自第 1 行。如何让下一张幻灯片自动“平滑滚动”到顶部？？？

另一方面，用户如何使用“手动旋转木马”？？？ (我不知道技术名称，但用户在想要下一张幻灯片时只需在移动设备上向右轻按)当使用移动设备时，下一张幻灯片很容易，而无需再次回到底部(再次找到旋转木马)(这个问题在移动设备上很重要)。

这是简单的代码

$(document).ready(function() {
$('#carousel-example-generic').carousel({
  interval: false
})
});

但完整代码在 fiddle 中:http://jsfiddle.net/luisan/B9FeP/1/

谢谢

Answer 1

您可以利用轮播幻灯片事件，然后添加 jquery 滚动顶部功能

$('#carousel-example-generic').bind('slid', function () {
   console.log('slid event');
   $('.carousel-inner').scrollTop(0);
});

也许使用 body 会更好

   $('body').scrollTop(0);

你还可以添加一个看起来更漂亮的动画

$('body').animate({ scrollTop: 0 }, 600);