Show "Back to top" link element using jQuery when you scroll down
Old question but I thought since I implemented one for myself to give my two cents. I believe it is better to use a setTimeout to safeproofing against multiple triggered events. Like this:
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.fadeOut();
}
else {
button.fadeIn();
}
}, 100);
});
}
$('#my-button').on('click', function(){
$('html, body').stop().animate({
scrollTop: 0
}, 500, 'linear');
return false;
});
//call function on document ready
$(function(){
showButton();
});
You can monitor the current window scroll position and act accordingly. If you want the offset to be after a certain point (the below code will do any scrolling, even 1px) then just check that $(this).scrollTop() > n
in the if statement, where n is the desired offset.
http://jsfiddle.net/robert/fjXSq/
$(window).scroll(function() {
if ($(this).scrollTop()) {
$('#toTop:hidden').stop(true, true).fadeIn();
} else {
$('#toTop').stop(true, true).fadeOut();
}
});