下一张幻灯片时如何使轮播平滑滚动到顶部并使用“手动轮播”

Question

我使用 carousel bootstrap 3 来使用幻灯片文本。当第 1 行的文字长到底部（例如：高度 300 像素）并且第 2 行的文字太短（例如：只有 10 像素）时，问题是当我们单击行旁边时，我们总是必须手动滚动到顶部# 2 从第 1 行开始。如何让下一张幻灯片时，系统会自动“平滑滚动”到顶部？？？

另一方面，用户如何使用“手轮播”？？？ （我不知道技术名称，但用户只需在想要下一张幻灯片时在移动设备上点击右侧）当使用移动设备时，下一张幻灯片很容易而无需再次进入底部（再次找到轮播）（这个问题在移动设备时很重要）。

这是简单的代码

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

但完整的代码在小提琴中：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);