Оценки читателей
0 Лайк 0 Лавки 0 Ахахах! 0 Ого! 0 Восторг 0 Печаль 0 Грусняшь
Приветствуем Вас на сайте!
Авторизировавшись на сайте Вы получаете возможность заказывать эксклюзивные вещи для Вашего сайта, скачивать новинки, общаться с друзьями.
Если у Вас ещё нет аккаунта на BEST STUDIO, вы можете создать его потратив не более 10-ти секунд используя форму справа с заголовком "Вход на сайт"
Если у Вас ещё нет аккаунта на BEST STUDIO, вы можете создать его потратив не более 10-ти секунд используя форму справа с заголовком "Вход на сайт"
Вход на сайт
Логин:
Пароль:
Вход
Войти по Логину и Паролю
О нас
Cтудия скриптов и дизайна BEST STUDIO, как студия перспективных веб-разработок, была основана 1 июля 2009 г. Уже более 17000 зарегистрированых пользователей! С момента ее создания мы четко придерживаемся принципа: «Быстро, качествено, дорого».
Заказывая работу для вашего сайта у нас, вы экономите время...
Заказывая работу для вашего сайта у нас, вы экономите время...
Стремитесь к лучшему - в Best Studio!
Войти | Зарегистрироваться
Настройки
Перезагрузите страницу
- Главная
- Авторские работы
- Другие модули
- Кнопка вверх вниз
DEMO
+
Добавляем кнопку на сайте для возвращения наверх страницы и перемещения вниз откуда начали возвращаться на верх.
1. Добавить на страницы HTML код:
<div id="ucodes"><i id="ucodes-f"></i><span class="ucodes-strelka"></span></div>
2. Добавить в CSS код, также в media screen указать размер ширины вашего сайта для отключения стилей кнопки, чтоб она не накладывалась по верх сайта при маленьком разрешении:
@media screen and (min-width:1200px) {
#ucodes.up > .ucodes-strelka {width: 0;height: 0;border-left: 6px solid transparent;border-right: 6px solid transparent;border-bottom: 8px solid #fff;float: left;margin-right: 3px;margin-top: 2px;}
#ucodes.down > .ucodes-strelka {width: 0;height: 0;border-left: 6px solid transparent;border-right: 6px solid transparent;border-top: 8px solid #fff;float: left;margin-right: 3px;margin-top: 2px;}
#ucodes.up, #ucodes.down {left: 10px;top: 0px;width:50px;position: fixed;cursor: pointer;padding: 2px 7px;font-weight: bolder;text-align: center;background: red;z-index: 9999;border-radius: 0px 0px 3px 3px;color: #fff;border-bottom: 1px solid #133783;-webkit-box-shadow: 0 2px 2px -2px rgba(0, 0, 0, .52);font-weight: norma;font-size: 11px;}
#ucodes.up:after {content:"Up"}
#ucodes.down:after {content:"Down"}
i#ucodes-f {position: fixed;top: 18px;bottom: 0px;width: 64px;left: 10px;-webkit-box-shadow: rgba(0, 0, 0, 0.521569) 0px 2px 2px -2px;border-radius: 2px 2px 0px 0px;background: rgba(159, 144, 178, 0.54902);border-bottom: 5px solid rgb(19, 55, 131);border-top: 1px solid rgb(58, 71, 97);}
#ucodes i {display:none;}
#ucodes.up i, #ucodes.down i {display:block;}
}
3. Добавить .js код:
var ucodesElem = document.getElementById('ucodes');
var pageYLabel = 0;
ucodesElem.onclick = function() {
var pageY = window.pageYOffset || document.documentElement.scrollTop;
switch(this.className) {
case 'up':
pageYLabel = pageY;
window.scrollTo(0, 0);
this.className = 'down';
break;
case 'down':
window.scrollTo(0, pageYLabel);
this.className = 'up';
}
}
window.onscroll = function() {
var pageY = window.pageYOffset || document.documentElement.scrollTop;
var innerHeight = document.documentElement.clientHeight;
switch(ucodesElem.className) {
case '':
if (pageY > innerHeight) {
ucodesElem.className = 'up';
}
break;
case 'up':
if (pageY < innerHeight) {
ucodesElem.className = '';
}
break;
case 'down':
if (pageY > innerHeight) {
ucodesElem.className = 'up';
}
break;
}
}
При копировании материала указывайте источник uCodes.ru
1. Добавить на страницы HTML код:
Код
<div id="ucodes"><i id="ucodes-f"></i><span class="ucodes-strelka"></span></div>
2. Добавить в CSS код, также в media screen указать размер ширины вашего сайта для отключения стилей кнопки, чтоб она не накладывалась по верх сайта при маленьком разрешении:
Код
@media screen and (min-width:1200px) {
#ucodes.up > .ucodes-strelka {width: 0;height: 0;border-left: 6px solid transparent;border-right: 6px solid transparent;border-bottom: 8px solid #fff;float: left;margin-right: 3px;margin-top: 2px;}
#ucodes.down > .ucodes-strelka {width: 0;height: 0;border-left: 6px solid transparent;border-right: 6px solid transparent;border-top: 8px solid #fff;float: left;margin-right: 3px;margin-top: 2px;}
#ucodes.up, #ucodes.down {left: 10px;top: 0px;width:50px;position: fixed;cursor: pointer;padding: 2px 7px;font-weight: bolder;text-align: center;background: red;z-index: 9999;border-radius: 0px 0px 3px 3px;color: #fff;border-bottom: 1px solid #133783;-webkit-box-shadow: 0 2px 2px -2px rgba(0, 0, 0, .52);font-weight: norma;font-size: 11px;}
#ucodes.up:after {content:"Up"}
#ucodes.down:after {content:"Down"}
i#ucodes-f {position: fixed;top: 18px;bottom: 0px;width: 64px;left: 10px;-webkit-box-shadow: rgba(0, 0, 0, 0.521569) 0px 2px 2px -2px;border-radius: 2px 2px 0px 0px;background: rgba(159, 144, 178, 0.54902);border-bottom: 5px solid rgb(19, 55, 131);border-top: 1px solid rgb(58, 71, 97);}
#ucodes i {display:none;}
#ucodes.up i, #ucodes.down i {display:block;}
}
3. Добавить .js код:
Код
var ucodesElem = document.getElementById('ucodes');
var pageYLabel = 0;
ucodesElem.onclick = function() {
var pageY = window.pageYOffset || document.documentElement.scrollTop;
switch(this.className) {
case 'up':
pageYLabel = pageY;
window.scrollTo(0, 0);
this.className = 'down';
break;
case 'down':
window.scrollTo(0, pageYLabel);
this.className = 'up';
}
}
window.onscroll = function() {
var pageY = window.pageYOffset || document.documentElement.scrollTop;
var innerHeight = document.documentElement.clientHeight;
switch(ucodesElem.className) {
case '':
if (pageY > innerHeight) {
ucodesElem.className = 'up';
}
break;
case 'up':
if (pageY < innerHeight) {
ucodesElem.className = '';
}
break;
case 'down':
if (pageY > innerHeight) {
ucodesElem.className = 'up';
}
break;
}
}
При копировании материала указывайте источник uCodes.ru
Данный раздел авторский все работы являются собственностью ucods.3dn.ru любое коммерческое использование строго запрещено.
При копировании материала указываем источник ucods.3dn.ru
Для редактирования кода необходимо иметь хотя бы базовые знания в HTML, CSS и Js технологиях.
При копировании материала указываем источник ucods.3dn.ru
Для редактирования кода необходимо иметь хотя бы базовые знания в HTML, CSS и Js технологиях.
Имя файла:
Размер: 2.3 Kb
Добавил: Best_Studio
Дата добавления: 25.01.2015 в 12:59 по МСК
Категория: Другие модули
Скачиваний: 489
Просмотров: 1454
Комментариев: 0
Эмоций:
Размер: 2.3 Kb
Добавил: Best_Studio
Дата добавления: 25.01.2015 в 12:59 по МСК
Категория: Другие модули
Скачиваний: 489
Просмотров: 1454
Комментариев: 0
Эмоций:
Теги: