Кнопки вверх и вниз с плавным появлением и плавной прокруткой
Данная тема является более продвинутым и компактным вариантом ранее созданной темы Кнопка вверх с плавным появлением. Основным отличием данной темы от указанной является наличие кнопки вниз.
Наглядный пример работы кнопок вверх и вниз, реализуемых при помощи JavaScript и jQuery, Вы можете наблюдать в правом нижнем углу нашего сайта.
Обратите внимание, что кнопка вверх плавно появляется только тогда, когда страничка прокручена вниз на указанное количество пикселей и плавно пропадет в том случае, если страничка была прокручена вверх выше указанного значения в пикселях. Кнопка вниз, наоборот, изначально видна и плавно исчезает, когда страничка прокручивается вниз ниже указанного значения и плавно появляется, когда страничка была прокручена вверх выше определенного значения. При нажатии на кнопку вверх или вниз осуществляется плавная прокрутка странички в заданном направлении, а не резкий перескок к началу или концу странички.
Для получения на Вашей страничке кнопок вверх и вниз, сходных с теми, что Вы можете наблюдать на нашем сайте, Вам необходимо будет подключить библиотеку jQuery. Данная библиотека реализует плавную прокрутку странички вверх и вниз, а также позволяет делать плавное появление и исчезновение кнопок. Подключать библиотеку jQuery следует следующим образом:
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js">
</script>Кнопки для прокрутки странички вверх и вниз с JavaScript кодом рекомендуем размещать в самом конце странички перед тегом </body>. Это позволит немного увеличить скорость загрузки основного содержимого Вашего сайта.
После подключения библиотеку jQuery, добавьте в конец Вашей странички JavaScript код, который будет отвечать за прокрутку, появление и исчезновение кнопок вверх и вниз:
<script type="text/javascript">
jQuery(function(){
$("#Go_Top").hide();
if ($(window).scrollTop()>=250) $("#Go_Top").fadeIn("slow")
$(window).scroll(function(){
if ($(window).scrollTop()<=250) $("#Go_Top").fadeOut("slow")
else $("#Go_Top").fadeIn("slow")
});
$("#Go_Bottom").hide();
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(){
$("html, body").animate({scrollTop:0}, "slow")
})
$("#Go_Bottom").click(function(){
$("html, body").animate({scrollTop:$(document).height()}, "slow")
})
});
</script>Теперь остается только добавить и описать наши кнопки для прокрутки странички вверх и вниз. Делается это следующим образом:
<img src="image/go_up.png" alt="Наверх" title="Наверх" id="Go_Top"
style="position: fixed; bottom: 60px; right: 1px; cursor: pointer;">
<img src="image/go_bottom.png" alt="Вниз" title="Вниз" id="Go_Bottom"
style="position: fixed; bottom: 20px; right: 1px; cursor: pointer;">Для отображения кнопок вверх и вниз, как правило, лучше использовать любые изображения по Вашему усмотрению.
Перед публикацией все комментарии проходят обязательную модерацию!
Если Вы хотите задать какой-либо вопрос, то сделайте это на нашем форуме.
Таким образом, Вы сможете быстрее получить ответ на интересующий Вас вопрос.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
заменить, или работать будет?
Захотел сделать в центре стрелки. Поставил в строке выше: center: 1px. Пробовал center: 50%, center просто. Сначала выводит все ок. Но стоит промотать вверх или вниз (когда стрелка прячется), то в последующем стрелка после появления смещается влево. Но никак не хочет появляться в центре. Подскажите что не так? :)
Подскажите, пожалуйста, в чем может быть проблема, у меня "стрелка" показывает только наверх.
П.С. прокрутка вверх работает нормально.
Если страница очень длинная и нажал кнопку прокрутки вниз (с измененным параметром SLOW на 100000 для плавного скроллинга) - как остановить прокрутку, если нужно (например, нажатием мышки или кнопкой "Пауза":) не ждать пока вся страница будет крутиться вниз?
$("#STOP").click(function(){
$("html, body").stop();
return false;
});
Далее необходимо создать объект с id='STOP', при клике на который необходимо остановить прокрутку. Например:
<a style='position: fixed; bottom: 100px; right: 1px;' href='#' id='STOP'>STOP</a>
на такую: $("html, body").animate({scrollTop:$(window).scrollTop()+200},"slow")
$("html, body").animate({scrollTop:0}, "slow") на такую:
$("html, body").animate({scrollTop:$("#div_scroll").position().top}, "slow")
$("html, body").animate({scrollTop:0}, 5000)
jQuery.noConflict();
(function($){
})(jQuery);
Именно так сделано у нас на форуме (можете глянуть исходный код).
http://www.w3.org/TR/html4/loose.dtd
и/или
http://www.w3.org/TR/html4/strict.dtd
это специально добавляемые, что бы IE принял position.
Респект автору СПАСИБО!
Как сделать прокрутку вниз на одну страницу аналогично клавише "PageDown"?
на $("html, body").animate({scrollTop:$(window).scrollTop()-$(window).height()}, "slow")
а строку $("html, body").animate({scrollTop:$(document).height()}, "slow")
на $("html, body").animate({scrollTop:$(window).scrollTop()+$(window).height()}, "slow")
Подскажите, как сделать так, чтобы прокручивалась страничка на какое-то количество пикселей, к примеру, на 200, не только вниз, но и вверх.
$("#Go_Top").click(function(){
$("html, body").animate({scrollTop:$(window).scrollTop()-200}, 3000)
})
Последний вопрос: Чтобы кнопка вниз появлялась и исчезала через определённое количество пикселей в JavaScript коде в строках if ($(window).scrollTop()<=$(document).height()-999) а также if ($(window).scrollTop()>=$(document).height()-999), задаём 999 - количество пикселей от низа странички?
999 - это пороговое значение, когда разница между значением от низа странички до верха видимой на данный момент части странички становится меньше этого значения, то кнопка пропадает. Если разрешение экрана у Вас большое, то следует увеличить данное значение.
У меня почему-то кнопки так и не появились :(
P.S. Ссылку на сайт удалил.
Если ее удалить, то все работает.
Теперь, когда нажимаешь вниз, а потом вверх, стрелочки исчезают, а также перестал работать lightbox (самые нижние картинки на нем стоят). Что не так, не пойму... :(
Тут прокатит?
Поигравшись, понял, что идеальный вариант - это не кнопка *пауза*,
а если паузой является сама стрелка. Т.е. нажали - поехала страница, увидели что-то интересное - кликнули по этой же стрелке - страница застыла. Кликнули ещё - поехала дальше.
Подскажите, что подправить в js. Заранее признателен!
$("html, body").animate({scrollTop:$(window).scrollTop()+200}, "slow")
то она может прокрутиться выше или ниже, а нужно именно на определенном блоке. Например: я в шапке нажимаю на кнопку вниз, и она опускается до блока с обратной связью. Заранее спасибо.
на $("html, body").animate({scrollTop:$("#stop").offset().top}, "slow"), где stop это id нужного элемента.