Остановка «Назад к списку Кнопка» перед сноске

Question

У меня есть этот код:.

 $(function() { 
// cache scroll to top button 
var b = $('#back-top'); 
// Hide scroll top button 
b.hide(); 
// FadeIn or FadeOut scroll to top button on scroll 
$(window).on('scroll', function(){ 
    // if you scroll more then 400px then fadein goto top button 
    if ($(this).scrollTop() > 500) { 
     b.fadeIn(); 
    // otherwise fadeout button 
    } else { 
     b.fadeOut(); 
    } 

}); 
// Animated smooth go to top 
b.on('click', function(){ 
    $('html,body').animate({ 
     scrollTop: 0 
    }, 2000); 
    return false; 
}); 
$('#back-top').) 
}); 

Все работает очень хорошо, но я не могу найти решение, чтобы остановить кнопку прокрутки, прежде чем он попадает в нижний колонтитулы :( Я надеюсь, что кто-то здесь есть решение моей проблемы !? Любая помощь или совет был бы очень полезно Спасибо

Обновление:!

хорошо я получаю там !! я обновленное-й e скрипта с новым кодом: http://jsfiddle.net/q8DUC/6/
Я реализовал линию, которая обеспечивает плавную прокрутку для каждого href = "#" и ее работу!
BUT У меня все еще есть проблема, что элемент back-top прокручивается в нижний колонтитул! Я бы предложил любые идеи или помочь сделать стоп-кадр для остановки до нижнего колонтитула! СПАСИБО!!

UPDATE 26/10/14:

Есть немного дальше: http://jsfiddle.net/q8DUC/20/
Просто не знаю, как я могу избежать прыжки кнопки!
Есть ли способ придерживаться кнопки внизу, а не сверху: 0 ???

Как всегда СПАСИБО за каждое предложение или помощь!

Answer 1

Это грубое решение, для которого вы пытаетесь достичь.

Анимация не совершенен здесь, но это ваша рабочая jsfiddle - http://jsfiddle.net/q8DUC/5/

Вы должны изменить вашу функцию следующим образом:

$('#backTop').hide(); 
$(window).scroll(function(){ 

var stop = $('#footer').position().top - $(window).scrollTop(); 

var bottomofbutton = $('#backTop').position().top + 100; 

var bottom = stop - $('#backTop').height() + 'px'; 
console.log(bottom); 
if ($(window).scrollTop() >100){ 
    $('#backTop').fadeIn(); 
} else { 
$('#backTop').fadeOut(); 
}; 

if (stop <= bottomofbutton){ 
    $('#backTop').css('top',bottom); 
} else if (stop >= bottomofbutton){ 

    $('#backTop').css({'bottom': '100px', 
         'top': ''}); 
} 
}); 

Я также переименовали ваш # обратно-топ идентификатор, потому что Очевидно, что jQuery не работает с этим способом. Вместо этого я вместо #backTop.

Answer 2

В вашей скрипке вы используете $(window).load(function() и здесь вы используете $(function(). Это не сработает с первым.

Также в этой строке $('#back-top').) внизу вашего кода ничего не делается. Удалите это, и все должно работать нормально.

Обновлено скрипку с http://jsfiddle.net/dJfpC/

(я также скрывала кнопку прокрутки, так что это не исчезать, когда страница первые грузы).