Туториалы >> Скрипты

Кнопка 'Вверх'
Пример скрипта можно посмотреть прокрутив ползунок скроллбара вниз с:
Для начала (если таковой не имеется) нужно подключить библиотеку JQuery. Вставляем этот код внизу страницы перед закрывающим тегом body.

<script language="JavaScript" type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"> </script>

Если ваш сайт расположен на хостинге uCoz, то этот скрипт не указываем.
Далее после скрипта библиотеки вставляем этот (тоже перед закрывающим тегом body):

<script language="JavaScript" type="text/javascript">
$(function() {
$.fn.scrollToTop = function() {
$(this).hide().removeAttr("href");
if ($(window).scrollTop() >= "230") $(this).fadeIn("slow")
var scrollDiv = $(this);
$(window).scroll(function() {
if ($(window).scrollTop() <= "230")
$(scrollDiv).fadeOut("slow")
else $(scrollDiv).fadeIn("slow")
});
$(this).click(function() {
$("html, body").animate({scrollTop: 0}, "slow")
})
}
});

$(function() {
$("#Go_Top").scrollToTop();
});
</script>

И опять же после этого скрипта, но перед </body>, вставляем скрипт:

<a href="#" id='Go_Top'><img alt="Вверх" src="http://адрес_картинки"></a>

Загружаем свою картинку со стрелкой на свой сайт и вместо http://адрес_картинки вставляем нужный адрес.
В CSS задаем параметры размещения кнопки:

#Go_Top {
position: fixed;
bottom: 5px; /*отступ снизу, top - сверху*/
left: 5px; /*отступ слева, right - справа*/
}


Вернуться к списку уроков

Комментировать