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

Question

我已经实现了一些显示漫游工具提示的功能，但是当 info-next 和 show 时，我找不到使屏幕滚动到下一个可见工具提示的方法-info 按钮被按下。

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

jsfiddle:https://jsfiddle.net/ucmvvqzh/4/

这是我的代码:HTML

<button class="show-info">display content</button>
<div class="info first_info current" data-index="0">
  <span>This is first</span>
    <button class="info-next">
    Next
  </button>
</div>
<div class="info second_info" data-index="1">
  <span>This is second</span>
    <button class="info-next">
    Next
  </button>
</div>
<div class="info third_info" data-index="2">
  <span>This is third</span>
  <button class="info-next">
    Next
  </button>
</div>
<div class="info fourth_info last" data-index="3">
  <span>Last</span>
    <button class="info-last">
    Close
    </button>
</div>
<div class="first">add here the first tooltip</div>
<div class="second">add here the second tooltip</div>
<div class="third">add here the third tooltip</div>
<div class="fourth">add here the fourth tooltip</div>

CSS

.first_info,
.second_info,
.third_info,
.fourth_info {
  display:none;
  margin-bottom: 20px;
  position: absolute;
}
.first, .second, .third, .fourth {position:relative;}
.first {top: 100px;}
.second {top: 300px;left: 50px;}
.third {top: 500px;left: 100px;}
.fourth {top: 750px;left: 150px;}

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').click(function() 但没有结果......

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

Answer 1

将此添加到您的点击处理程序:

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

并正确设置当前类