Пишу о жизни, о работе, о коде. Специалист в ИТ области.
1 заметка с тегом

jQuery

ScrollUp.js v1.0.1

1 февраля 2015, 5:15

Привет. Вот и настала время вставить мои пять копеек в большой мир Веба!
По работе достаточно часто приходится верстать одностраничные сайты и практически в каждом должна быть кнопка «На верх». Это такая кнопочка, которая появляется после прокрутки страницы, чтобы пользователю было легче вернуться к началу страницы. Всем и так понятно, что это работы на три-пять минут, но под конец мне начало припекать каждый раз интегрировать это в сайт (скрипт, код, картинка) и я решил как-то упростить себе задачу, ну а в процессе упрощения решил довести это дело до более-менее презентабельного и оставить тут.
Сразу скажу, что скрипт работает на jQuery, так что для работы с ним у вас на сайте должен быть подключен данный фреймворк. Если такового нет, то сделать это можно вот так:

<!--Просто вставьте эту строчку между <head></head>-->
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>

Далее подключаем srollUp.js. Скрипт лежит у меня на сервере. В какой-то степени я облегчил вам задачу. Вставляем эту строчку:

<script src="http://api.stomati.ru/scrollUp/scrollUp.js"></script>
<!-- или -->
<script src="http://api.stomati.ru/scrollUp/scrollUp.min.js"></script>

А для запуска используем

<script>
$(function(){
    $.scrollUp();
});
</script>

А теперь о настройках. Их я сделал не много и не мало, но нормально. Что мы имеем:

$(function(){
    $.scrollUp({
   	scrollName: 'scrollUp', // ID создаваемого элемента
	topDistance: 100, // Дистанция от верха страницы, когда появится кнопка
	topSpeed: 300, // Скорость прокрутки вверх (ms)
	animation: 'fade', // Анимация появления кнопки (fade, slide, none)
	animationInSpeed: 200, // Время анимации появления (ms)
	animationOutSpeed: 200, // /Время анимации исчезновения (ms)
	scrollText: 'Вверх!', // Текст при наведении
	bgcolor: '#D04000', //Фоновый цвет
	bg: 'http://api.stomati.ru/scrollUp/top.png', //Фоновое изображение
	margin: '20px', //Отступ от правого края
	btm: '20px' //Отступ от низа страницы
	wdth: '35px', //Ширина блока
	hght: '35px', //Высота блока
    });
});

Вроде все. Пользуйтесь, пишите что доработать, что добавить. Буду рад любому замечанию :)

А на этом всё, с вами был Илья ;)
Пока, 05:15

jQuery   Идеи   Работа