На странице есть ссылки с изображением стрелок для прокрутки вниз/вверх (сначала видима только стрелка "вниз", при клике на нее она заменяется на стрелку "вверх"). При первом клике по стрелке "вниз" страница прокручивается вниз, и при этом эта стрелка заменяется на стрелку "вверх". Далее идет клик по новой стрелке и страница прокручивается вверх, и стрелка, опять таки, заменяется на противоположную. Но уже после этого прокрутка перестает работать. В чем проблема?
Вот сам плагин:
$('#back-to-bottom').click(function(){
$('html, body').animate({scrollTop:$(document).height()}, 'slow');
$('#back-to-bottom').removeClass('visible').addClass('hidden');
$('#back-to-top').removeClass('hidden').addClass("visible");
$('#back-to-bottom').detach().prependTo('#back-to-top');
return false;
});
$('#back-to-top').click(function() {
$('html, body').animate({ scrollTop: 0 }, 'slow');
$('#back-to-top').removeClass('visible').addClass('hidden');
$('#back-to-top').replaceWith('<a href="#" id="back-to-bottom" class="visible"><span class="glyphicon glyphicon-chevron-down"></span></a>');
return false;
});
Это сss:
#back-to-top {position: fixed;
right: 0.4em;
bottom: 0.1em;
font-size: 2.4em;
color: #1cb1ba;
z-index: 11;
}
.hidden {
visibility: hidden;
}
.visible {
visibility: visible;
}
#back-to-bottom {
position: fixed;
right: 0.4em;
bottom: 0.1em;
font-size: 2.4em;
color: #1cb1ba;
z-index: 11;
}
И сами ссылки с стрелками:
<a href="#" id="back-to-bottom" class="visible"><span class="glyphicon glyphicon-chevron-down"></span></a>
/*-- тут размещается весь контент --*/
<a href="#" id="back-to-top" class="hidden"><span class="glyphicon glyphicon-chevron-up"></span></a>