jQuery scrollを使用して、設定されたピクセル数だけ上下にスクロールします。Top

Question

divのリンクリストがオーバーフローしています。私がしたいことは、ユーザーが上/下ボタンでリンクのこのメニューをナビゲートできることです。ユーザーが対応するボタンをクリックするたびに、1つのリンク要素の高さだけ上下にスクロールするようにします。私はいくつかのコードを試しましたが、私はそれを両方向に正しい量だけスクロールさせる方法を理解していないようです。誰か助けてくれますか？

すべてのリンクは同じクラスです。

編集：私はすでに上下にスクロールするために管理している

。今私はちょうど1つのリンクの高さの少しのステップでスクロールする必要があります。

$(function() { 
var ele = $('#scroller'); 
var speed = 10, scroll = 5, scrolling; 

$('.scroller-btn-up').click(function() { 
    // Scroll the element up 
    scrolling = window.setInterval(function() { 
     ele.scrollTop(ele.scrollTop() - scroll); 
    }, speed); 
}); 

$('.scroller-btn-down').click(function() { 
    // Scroll the element down 
    scrolling = window.setInterval(function() { 
     ele.scrollTop(ele.scrollTop() + scroll); 
    }, speed); 
}); 

$('.scroller-btn-up, .scroller-btn-down').bind({ 
    click: function(e) { 
     // Prevent the default click action 
     e.preventDefault(); 
    }, 
    mouseleave: function() { 
     if (scrolling) { 
      window.clearInterval(scrolling); 
      scrolling = false; 
      } 
     } 
    }); 
}); 

Answer 1

これは、現在のコードを使用するだけで十分簡単で、繰り返しスクロールするのを止めるには間隔をなくすだけで済みます。次に、mouseleave機能は必要ありません。スクロール変数をリンクタグの高さと同じ値に設定することができます。 20px高いリンクタグの20は：

$(function() { 

    var ele = $('#scroller'); 
    var scroll = 20; 

    $('.scroller-btn-up').click(function() { 
    // Scroll the element up  
    ele.scrollTop(ele.scrollTop() - scroll); 
    }); 

    $('.scroller-btn-down').click(function() { 
    // Scroll the element down 
    ele.scrollTop(ele.scrollTop() + scroll); 
    }); 

    $('.scroller-btn-up, .scroller-btn-down').bind({ 
    click: function(e) { 
     // Prevent the default click action 
     e.preventDefault(); 
    } 
    }); 

});