Кнопки вверх и вниз с плавной прокруткой и возможностью остановки прокрутки

[Admin]

В теме Кнопки вверх и вниз с плавным появлением и плавной прокруткой пользователь, представившийся как Савелий, оставил комментарий с довольно интересным предложением - реализацией остановки прокрутки странички при повторном клике на стрелку прокрутки. При еще одном клике - прокрутка должна возобновиться.

Данная идея нам понравилась, в результате чего на свет появился следующий скрипт:

Код:

<script type="text/javascript" src="//ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>

<style type="text/css">
.scroll { position: fixed; right: 1px; cursor: pointer; display: none; width: 23px; height: 35px; }
</style>

<script type="text/javascript">
jQuery(function(){
play=0;

if ($(window).scrollTop()>=250) $("#Go_Top").fadeIn("slow")
$(window).scroll(function(){
  if ($(window).scrollTop()<=250) $("#Go_Top").fadeOut("slow")
  else $("#Go_Top").fadeIn("slow")
});

if ($(window).scrollTop()<=$(document).height()-999) $("#Go_Bottom").fadeIn("slow")
$(window).scroll(function(){
  if ($(window).scrollTop()>=$(document).height()-999) $("#Go_Bottom").fadeOut("slow")
  else $("#Go_Bottom").fadeIn("slow")
});

$("#Go_Top").click(function(){
  if (play==0) { play=1; $("html, body").animate({scrollTop:0}, 3000); }
  else { play=0; $("html, body").stop(); }
})

$("#Go_Bottom").click(function(){
  if (play==0) { play=1; $("html, body").animate({scrollTop:$(document).height()}, 3000); }
  else { play=0; $("html, body").stop(); }
})
});
</script>


<div class="scroll" style='bottom: 60px;' id='Go_Top'>
<img src="image/go_up.png" alt="Наверх" title="Наверх">
</div>
<div class="scroll" style='bottom: 20px;' id='Go_Bottom'>
<img src="image/go_bottom.png" alt="Вниз" title="Вниз">
</div>

Скрипт работает отлично, и прокрутка останавливается, если кликнуть по любой стрелке прокрутки. Так же в любой момент можно не только остановить прокрутку странички, но и сменить направление прокрутки, если еще раз кликнуть на противоположную стрелку.

[Савелий]

Огромное спасибо! Отличный код. Нигде не встречал, чтобы пауза на стрелке была.

Помогите с кодировкой тайтлов стрелок!
Что и где только не прописывал, всё равно кракозаблы вместо "вниз".
Сайт на windows-1251.

(18.11.2013 19:45:03)Admin писал(а):  В теме [url=http://usefulscript.ru/scroll_top_buttom.php]

Код:

<div class="scroll" style='bottom: 60px;' id='Go_Top'>
<img src="image/go_up.png" alt="Наверх" title="Наверх">
</div>
<div class="scroll" style='bottom: 20px;' id='Go_Bottom'>
<img src="image/go_bottom.png" alt="Вниз" title="Вниз">
</div>

[Admin]

В .htaccess указали кодировку?

Цитата:AddDefaultCharset windows-1251

Так же стоит посмотреть какая у Вас кодировка самого файла со скриптом.

[Савелий]

Кодировка и в файле и в .htaccess выставлена.
Не могу понять, в чём дело.

[Савелий]

Обнаружил такой глюк:
Прокрутили рукой страницу до низа
Появилась стрелка, нажали чтобы вернуться наверх
Увидели что-то, кликнули, страница остановилась.
Посмотрели что заинтересовало, кликнули, страница вернулась в начало.
Если не уйти со страницы, а ещё раз прокрутить вниз
То при клике страница не поднимется.
Нужно кликать несколько раз.
Т е одна и та же функция работает то с одного клика то с нескольких.

[Admin]

Да, действительно, упустил данный момент, хотя думал о том, что в крайних положениях экрана переключатель play нужно менять.

Для того, чтобы исправить данный недостаток, нужно внутрь jQuery(function(){ }); добавить строки:

Код:

$(window).scroll(function(){
  if ($(window).scrollTop()==0 || $(document).height()==($(window).scrollTop()+$(window).height())) play=0;
});