Главная » Файлы » Прочие скрипты » jQuery

Плавающие кнопки "Вверх", "Вниз", "На страницу выше", "На страницу ниже" с плавным скроллингом на jQuery
23.06.14, 09:38:23

Скачать файл




Замечательный скрипт, который позволяет плавно прокручивать страницы вверх и вниз. Плагин лёгок в настройке и установке

Для начала посмотрите ДЕМО

Установка:

После /head на нужных страницах вставляйте:
Код
<script src="/js/jQuery.edgeButton-1.0.0.js" type="text/javascript"></script>
<link href="/css/jQuery.edgeButton-1.0.0.css" rel="stylesheet" type="text/css" />

<script type="text/javascript">
$(document).ready(function(){  
$("#myEdgeButton1").edgeButton({  
buttonText: "Наверх",  
rotateButton: "rotateLeft",  
colorText: "#ffffff",  
colorBackground: "#999999"  
});  

$("#myEdgeButton2").edgeButton({  
buttonText: "На страницу выше",  
buttonPrefix: "Button2",  
buttonDirection: "right",  
buttonFunction: "scrollUp",  
colorText: "#ffffff",  
colorBackground: "#999999"  
});  

$("#myEdgeButton3").edgeButton({  
buttonText: "На страницу ниже",  
buttonPrefix: "Button3",  
buttonDirection: "right",  
buttonFunction: "scrollDown",  
rotateButton: "rotateRight",  
buttonTop: 300,  
colorText: "#ffffff",  
colorBackground: "#999999"  
});  

$("#myEdgeButton4").edgeButton({  
buttonText: "Вниз",  
buttonPrefix: "Button4",  
buttonFunction: "scrollBottom",  
buttonTop: 200,  
colorText: "#ffffff",  
colorBackground: "#999999"  
});  
});  
</script>  

<div id="myEdgeButton1"></div>
<div id="myEdgeButton2"></div>
<div id="myEdgeButton3"></div>
<div id="myEdgeButton4"></div>


Немного разберёмся в настройках:

$("#myEdgeButton3").edgeButton({ - ID кнопки, к кторой будет применён эффект
buttonText: "На страницу ниже", - название кнопки
buttonPrefix: "Button3", - префикс кнопки
buttonDirection: "right", - где будет располагаться кнопка (Слева или справа)
buttonFunction: "scrollDown", - эффект, который будет выполнять кнопка (В данном случае перематывать вниз вниз)
rotateButton: "rotateRight", - поворот кнопки (В данном случае кнопка повёрнута вправо)
buttonTop: 300, - отступ от верхней границы окна
colorText: "#ffffff", - цвет текста кнопки
colorBackground: "#999999" - цвет фона самой кнопки
});

Осталось лишь залить скрипт из прикреплённого архива в папку js и стиль в папку css

Материал подготовлен Apocalypse

Категория: jQuery | Добавил: Apocalypse | Теги: страницу, вверх, на, вниз, ниже, Выше, плавающие, Кнопки
Просмотров: 286 | Загрузок: 0 | Рейтинг: 3.0/1
Всего комментариев: 0
Имя *:
Email: