दिखाएं लिंक तत्व "शीर्ष पर वापस" jQuery का उपयोग कर जब आप

Question

नीचे स्क्रॉल मैं jQuery के साथ व्यवहार की नकल करने के लिए आप यहां देख सकते की तरह हैं: http://edo.webmaster.am/

बस ठीक नीचे कोने में देखो, थोड़ा नीचे स्क्रॉल करें और आप "वापस ऊपर" बटन देखेंगे।

तो यह तब तक अदृश्य है जब तक आप किसी पृष्ठ को स्क्रॉल नहीं करते हैं और फिर यह प्रकट होता है (एनिमेटेड)।

मैं इसे jQuery में कैसे कर सकता हूं?

Answer 1

आप वर्तमान विंडो स्क्रॉल स्थिति की निगरानी कर सकते हैं और तदनुसार कार्य कर सकते हैं। यदि आप ऑफसेट को किसी निश्चित बिंदु के बाद करना चाहते हैं (नीचे कोड कोई स्क्रोलिंग करेगा, यहां तक ​​कि 1px) तो उस कथन में $(this).scrollTop() > n जांचें, जहां एन वांछित ऑफसेट है।

http://jsfiddle.net/robert/fjXSq/

$(window).scroll(function() { 
    if ($(this).scrollTop()) { 
     $('#toTop:hidden').stop(true, true).fadeIn(); 
    } else { 
     $('#toTop').stop(true, true).fadeOut(); 
    } 
}); 

Answer 2

पुराना सवाल लेकिन मैंने सोचा था कि के बाद से मैं एक कार्यान्वित अपने आप को मेरे दो सेंट देने के लिए के लिए। मेरा मानना ​​है कि एकाधिक ट्रिगर घटनाओं के खिलाफ सुरक्षितरोधक के लिए सेटटाइमआउट का उपयोग करना बेहतर है। इस तरह:

function showButton() { 


    var button = $('#my-button'), //button that scrolls user to top 
     view = $(window), 
     timeoutKey = -1; 

    $(document).on('scroll', function() { 
     if(timeoutKey) { 
      window.clearTimeout(timeoutKey); 
     } 
     timeoutKey = window.setTimeout(function(){ 

      if (view.scrollTop() < 100) { 
       button.fadeIn(); 
      } 
      else { 
       button.fadeOut(); 
      } 
     }, 100); 
    }); 
} 

$('#my-button').on('click', function(){ 
    $('html, body').stop().animate({ 
     scrollTop: 0 
    }, 500, 'linear'); 
    return false; 
}); 

//call function on document ready 
$(function(){ 
    showButton(); 
});