使用下一個和上一個按鈕滾動錨點標記

Question

我正在嘗試使滾動文本框具有下一個和上一個按鈕，以將用戶滾動到文本中的下一個/上一個錨定標記。

我一直在尋找這樣的jsfiddle http://jsfiddle.net/mplungjan/T5FgG/和喜歡的方式，加速/減速，但是當我將其插入文本區域它不工作http://jsfiddle.net/T5FgG/16/

<button id="jumpbut">Next</button> 

<div style="height:120px;width:500px;border:1px solid #ccc;font:16px/26px Georgia, Garamond, Serif;overflow:auto;"> 
    <p><br/></p> 
    <p><br/></p> 
    <p><br/></p> 
    <p><br/></p> 
    <p><br/></p> 
    <a name="a">A target</a> 
    <p><br/></p> 
    <p><br/></p> 
    <p><br/></p>   
    <p><br/></p> 
    <p><br/></p> 
    <p><br/></p> 
    <p><br/></p> 
    <p><br/></p> 
    <a name="B">B target</a> 
</div> 

我最終想要使用引導程序來美化這個。如果引導程序有某些東西或擴展已經可以實現這一點，請告訴我。

任何幫助表示讚賞。

Answer 1

更改下面的代碼。

$(function() { 
    var $anchors = $('a[href*=#]:not([href=#])'),target = $anchors.first(),current=0; 
    $("#jumpbut").on("click",function() { 
    $('#test').animate({ 
     scrollTop: target.offset().top 
    }, 2000,'swing'); 
    target = $anchors.eq(current+1); 
    }); 
}); 

更新了Jsfiddle供您參考。

http://jsfiddle.net/T5FgG/18/