Приветствую Вас Прохожий | RSS Вторник, 06.12.2016, 11:11
Меню сайта
ВИДЕО УРОКИ СКРИПТЫ UCOZ ШАБЛОНЫ UCOZ ФОТОШОП UCOZ КАТАЛОГ СТАТЕЙ ВЕБМАСТЕРУ UCOZ ВИДЕО ФОТОШОПА ДОПОЛНЕНИЕ САЙТА РАЗДЕЛ СТУДИИ УСЛУГИ НАШЕГО САЙТА


Мини-чат
Все вопросы задаем в форуме,
здесь они игнорируются!



Статистика
Онлайн всего: 16
Гостей: 14
Пользователей: 2
MaDaRa, LESIYI



Главная » Файлы » Скрипты для uCoz » Скрипты Вид новостей

Быстрый подъем вверх страницы для сайта ucoz

Быстрый подъем вверх страницы для сайта ucoz
Посетителям не придется несколько минут использовать скролл, чтобы подняться наверх страницы. При спуске вниз по странице у пользователя всегда будет ссылка в правом нижнем углу (или в любом другом месте), которая в любой момент может вернуть его к началу страницы.

Для начала давайте добавим кнопку где-нибудь на странице и якорь в самом верху страницы (который будет ориентиром при нажатии на кнопку и поднимет посетителя вверх).

Code
<div id="top"></div> <!--это вверху страницы-->
  <div id="message"><a href="#top" id="top-link">Подняться вверх</a></div> <!--это вниз-->

Теперь нам необходимо немного CSS для оформления внешнего вида:
Code
<style>
.container {padding: 0 0 70px 0;} /* отступ снизу */

#message
{
display: block;
display: none;

/* ссылка над всеми элементами */
z-index: 999;

/* ссылка не заслоняет полностью текст под ней */
opacity: .8;

/* ссылка всегда на одном и том же месте */
position: fixed;

/* ссылка внизу страницы */
top: 100%;
margin-top: -80px; /* = height + preferred bottom margin */

/* ссылка по центру */
left: 80%;
margin-left: -80px;

/* закругленные углы */
-moz-border-radius: 24px;
-webkit-border-radius: 24px;

/* ссылка большая, заметная и ее легко найти */
width: 300px;
line-height: 48px;
height: 48px;
padding: 10px;
background-color: #000;
font-size: 24px;
text-align: center;
}

#message a { color: #fff; }
</style>

И конечно же - jQuery.
Code
<script type="text/javascript" charset="utf-8">
$(function () { // run this code on page load (AKA DOM load)

var scroll_timer;
var displayed = false;
var $message = $('#message');
var $window = $(window);
var top = $(document.body).children(0).position().top;

$window.scroll(function () {
window.clearTimeout(scroll_timer);
scroll_timer = window.setTimeout(function () {  
if($window.scrollTop() <= top)  
{
displayed = false;
$message.fadeOut(500);
}
else if(displayed == false)  
{
displayed = true;
$message.stop(true, true).fadeIn(500).click(function () { $message.fadeOut(500); });
}
}, 100);
});
$('#top-link').click(function(e) {
e.preventDefault();
$.scrollTo(0,300);
});
});
</script>

Вот и все готово.
Надеюсь вам это пригодиться!

Автор\Источник: не указан или не известен!

Для того что бы скачать архив необходимо зайти на сайт как пользователь.
Просмотров: 3927 | Комментарии: 7 | Рейтинг: 5.0/2 | |Категория: Скрипты Вид новостей | Добавил: ALINA | Дата: 29.11.2009 | Скачали: 0 | Теги: ВВЕРХ, быстрый, Подъем, ucoz, сайта, Для, Страницы
Похожие новости на нашем сайте
Коментарий к новости

Всего комментариев: 7
7 kgs2009   Дата: 26.10.2011  Время: 14:42   [№ 10870]
из за massege у меня комментарии не работают

5 artem297   Дата: 02.08.2011  Время: 16:38   [№ 9815]
этот скрипт только для юкоз???
не получается сделать, можно по подробнее

6 mdbaner   Дата: 02.08.2011  Время: 16:44   1 [№ 9816]
скрипт старый.
в первом коде две строчки которые не должны быть вместе , они подписаны одна вверху другая внизу для закладок.

3 NSPR   Дата: 05.10.2010  Время: 21:57   [№ 4642]
И конечно же - jQuery. Как понять эту фразу..?
jQuery - что это? deal

4 mdbaner   Дата: 07.10.2010  Время: 09:20   1 [№ 4653]
jQuery вставьте в head

2 NSPR   Дата: 05.10.2010  Время: 21:54   [№ 4641]
А Роман то, прав!
Помогите разобраться, по пунктам, куда что нажать и вставить. Не все профи в

+2   Спам
1 roman2009   Дата: 10.12.2009  Время: 16:13   [№ 1285]
Жаль! Очень нужная вещь, но я не понял как это правильно сделать. Можно подробней пожалуйста. Я поставил, но ничего не получилось.Может не туда поставил. Куда надо ставить это всё?


Добавлять комментарии могут только зарегистрированные пользователи.
[ Регистрация | Вход ]

Форма входа
Логин:
Пароль:


Поиск


На форуме

1 Файловик. Уникальные те...

0

2 Куплю сайты в индексе Я...

1

3 Куплю сайты с ТИЦ/PR (п...

9

4 Предлагаю услуги для ан...

0

5 Предлагаю услуги по про...

0

6 Комплексный прогон сайт...

51

7 Сайт онлайн фильмов на ...

1

8 Проблема с таблицей

9

9 Отредактировать фото

2

10 Уже все перепробовал )

1


Подробней о форуме


Комментарии



Copyright UcozOn.ru™ © 2008-2016


Кнопка 88х31 сайта ucozon.ru