jQuery 스크롤을 사용하여 설정된 픽셀 크기만큼 위아래로 스크롤 위쪽 화살표

Question

div에 오버플로가있는 링크 목록이 있습니다. 내가 원하는 것은 사용자가 위쪽 및 아래쪽 버튼을 사용하여이 링크 메뉴에서 탐색 할 수 있다는 것입니다. 사용자가 해당 버튼을 클릭 할 때마다 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(); 
    } 
    }); 

});