jQuery：滚动到下一个可见的演练工具提示

我已经实现了一些显示漫游工具提示的功能，但是当按下

info next

和

show info

按钮时，我找不到一种方法使屏幕滚动到下一个可见的工具提示

对于这类问题已经有了一些答案，但它们对我没有帮助，或者我找不到实现它们的最佳方法

jsfiddle：

这是我的密码： HTML

jQuery

$(document).ready(function(){
  $('.show-info').click(function(){
    firstPos = $(".first").offset();
    secondPos = $(".second").offset();
    thirdPos = $(".third").offset();
    fourthPos = $(".fourth").offset();

    $('.first_info').css({
        left: firstPos.left + "px",
      top: firstPos.top + 30 + "px"
    })
    $('.second_info').css({
        left: secondPos.left + "px",
      top: secondPos.top + 30 + "px"
    })
    $('.third_info').css({
        left: thirdPos.left + "px",
      top: thirdPos.top + 30 + "px"
    })
    $('.fourth_info').css({
        left: fourthPos.left + "px",
      top: fourthPos.top + 30 + "px"
    })    

    $('.info.first_info').show();
  });
  $('.info-last').click(function(){
    $('.info').hide();
  });
  $('.info-next').click(function() {
      $('.current')
        .removeClass('current')
        .hide()
        .next(".info")
        .show()
        .addClass('current');
  });
});

我已尝试将以下代码添加到

$（'.info next'）。单击（function（）

），但没有结果

$('html, body').animate({
  scrollTop: $('.info').offsetTop
}, 2000);

---

将此添加到单击处理程序：

$('html, body').animate({
   scrollTop: $('.current').offset().top
}, 2000);  

---

正确设置当前类是否要创建某种向导？如果是，请尝试此方法。是的，它已经实现，JSFIDLE仅包含功能。这些示例对我没有帮助…请查看本文

$('html, body').animate({
  scrollTop: $('.info').offsetTop
}, 2000);

$('html, body').animate({
   scrollTop: $('.current').offset().top
}, 2000);