jQuery：滾動到下一個可見的演練提示

我已經實現了一些顯示演練提示的功能，但我無法找到一種方法使屏幕滾動到下一個可見工具提示，當按下按鈕info-next和show-info 。jQuery：滾動到下一個可見的演練提示

已經有一些回答這種問題，但他們不幫我，否則我無法找到實現的最佳途徑。

的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);

來源

2016-02-01 Valip

你想創建某種嚮導嗎？如果是的話，試試這個http://www.jquery-steps.com/Examples – xxxmatko

是的，它已經實現了的jsfiddle只包含的功能。這些例子不是幫助我... – Valip

檢查這個帖子http://stackoverflow.com/questions/6677035/jquery-scroll-to-element – xxxmatko

添加到您的點擊處理：

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

，並正確設置了當前類

來源

2016-02-01 11:01:35 xxxmatko

jQuery：滾動到下一個可見的演練提示

回答

相關問題