2

На странице есть ссылки с изображением стрелок для прокрутки вниз/вверх (сначала видима только стрелка "вниз", при клике на нее она заменяется на стрелку "вверх"). При первом клике по стрелке "вниз" страница прокручивается вниз, и при этом эта стрелка заменяется на стрелку "вверх". Далее идет клик по новой стрелке и страница прокручивается вверх, и стрелка, опять таки, заменяется на противоположную. Но уже после этого прокрутка перестает работать. В чем проблема?

Вот сам плагин:

$('#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>

2 ответа 2

2

Не решение, а альтернатива (я бы лучше как-то так сделала):

$('.back-to').on('click', function(e){
  e.preventDefault();
  
   //   Проверяем кнопку down, если есть класс .to-bottom - значит скролим вниз, 
   //   заменяем класс кнпки с .to-bottom на .to-top
   //   добавляем внутреннее содержимое (glyphicon-chevron-top).
  if($(this).hasClass('to-bottom')){ 
    $('html, body').animate({scrollTop:$(document).height()}, 'slow');
    $(this).toggleClass('to-bottom to-top');
    
    $(this).html('<span class="glyphicon glyphicon-chevron-top">top</span>');
    
   //   Проверяем кнопку top, если есть класс .to-top - значит скролим вниз, 
   //   заменяем класс кнпки с .to-top на .to-bottom
   //   добавляем внутреннее содержимое (glyphicon-chevron-bottom).
  } else if($(this).hasClass('to-top')){
    $('html, body').animate({ scrollTop: 0 }, 'slow');
    $(this).toggleClass('to-top to-bottom');
    
    $(this).html('<span class="glyphicon glyphicon-chevron-bottom">bottom</span>');
  }
});
.back-to {
  position: fixed;
  right: 0.4em;
  font-size: 2.4em;
  color: #1cb1ba;
  z-index: 11;
}

.to-top {
  bottom: 0.1em;
}

.to-bottom {
  top: 0.1em;
}

.hidden {
  visibility: hidden;
}

.visible {
  visibility: visible;
}



/* Для наглядности */
.content {
  height: 1000px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>


  <a href="#" class="back-to to-bottom">    
    <span class="glyphicon glyphicon-chevron-down">down</span>
  </a>
  
  <div class="content"></div>

Надпись down\top внутри .glyphicon только для наглядности.

2

Это происходит потому что вы зачем-то заменяете кнопку одну на другую, вот так: $('#back-to-top').replaceWith(...).

Это неправильный подход, вам нужно менять ВИДИМОСТЬ кнопок. Т.е. переключать у них display:block/none. При этом обе кнопки должны присутствовать на странице одновременно, не нужно их удалять или заменять на другие, иначе события, которые вы на них навесили, прекратят работать.

Это можно сделать с помощью команд .show() и .hide() например. В результате должно получиться что-то вроде этого:

$('#back-to-top').click(function() {
    $('#back-to-top').hide();
    $('#back-to-bottom').show();
});
$('#back-to-bottom').click(function() {
    $('#back-to-bottom').hide();
    $('#back-to-top').show();
});

Ваш ответ

Нажимая на кнопку «Отправить ответ», вы соглашаетесь с нашими пользовательским соглашением, политикой конфиденциальности и политикой о куки

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.