jQuery: scroll to the next visible walkthrough tooltip

Question

I've implemented some functions to display a walkthrough tooltips, but I can't find a way to make the screen scroll to the next visible tooltip when the info-next and show-info buttons are pressed.

There already are some answers to this kind of question, but they don't help me or I can't find the best way to implement them.

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

Here's my code: 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');
  });
});

I already tried to add the following code to $('.info-next').click(function() but with no result...

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

Do you want to create some kind of wizard? If so, try this http://www.jquery-steps.com/Examples — xxxmatko, Feb 01 '16 at 10:50
Yes, it's already implemented, the jsfiddle contains only the functionality. These examples are not helping me... — Valip, Feb 01 '16 at 10:52
Check this post http://stackoverflow.com/questions/6677035/jquery-scroll-to-element — xxxmatko, Feb 01 '16 at 10:57

score 0 · Accepted Answer · answered Feb 01 '16 at 11:01

0

Add this to your click handlers:

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

and correct setting the current class

answered Feb 01 '16 at 11:01

xxxmatko

3,724
2
13
23

jQuery: scroll to the next visible walkthrough tooltip

1 Answers1