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(); 
    } 
    }); 

});