Кнопка наверх для сайта. Плагин scroll to top

Раздел: Создание сайта » Работа с кодом
Кнопка наверх для сайта. Плагин scroll to top


Собственно код не мой. Умельцы вытащили его из проекта яндекс поиск на сайт, а остальные подхватили и размножили описание на своих сайтах! Итак по порядку:

1. Добавляем код ниже между



Здесь есть такие переменные:

#scroller - название кода! Используется для вставки JQ элементов в HTML
{if ($(this).scrollTop() > 0) - Число, т.е. нуль - величина скрула вниз, после которой появляется кнопка вверх.
animate({scrollTop: 0}, 400); - 400 - скоростть подъема вверх

2. Добавляем код перед закрывающим тегом




3. В CSS стили добавляем следующий код:

.b-top {z-index:2600;position:fixed;left:0;bottom:90px;width:34%;margin-left:50%;opacity: 0.5;filter:alpha(opacity=50);}
.b-top:hover {opacity:1;filter:alpha(opacity=100);cursor:pointer;}
.b-top-but {z-index:2600;position:absolute;display:block;left:56px;bottom:0;margin:0 0 0 100%;padding:32px 12px 4px; color:white;background:#D8D5C2 url(https://site.yandex.ru/static/css/blocks/b-j-top/b-j-top.png/b-j-top.png) no-repeat 50% 11px;border-radius:7px;}


4. Вытягиваем картинку

Картинку накодится по адресу: https://site.yandex.ru/static/css/blocks/b-j-top/b-j-top.png! Увидеть ее там довольно проблематично. Я через оперу в разделе проинспектировать элемент, который обводит всю графику на странице скопировал ее себе! Да бы не мучаться, можете взять ее ниже:

Кнопка наверх для сайта. Плагин scroll to top



Внимание! Для работы на сайте должна быть подключена JQ библиотека!
« Новый альбом Juno Reactor - T...
GPU-Z - мини програмка для мон... »
Понравилась статья "Кнопка наверх для сайта. Плагин scroll to top" из раздела Создание сайта » Работа с кодом? Подпишись на RSS. Будь в курсе всего происходящего на сайте
Комментариев: 0 •  Просмотров: 5870   Дата: 24-апр-2013, 17:10

Похожие статьи

PHP - показ прелоадера через определенное время используя Cookie
Стояла задача установить скрипт preloader-a, который, прежде чем загрузить страницу, имитировал бы
JS - кнопка вверх для сайта по всей высоте экрана
Небольшой скриптик, который выводит полоску по всей высоте экрана и при наведении курсора сайт
DLE - красивые всплывающие подсказки через title, скрипт tooltip
В данной статье расскажу про маленький скриптик, с помощью которого можно настроить всплывающую
CSS - полупрозрачный блок поверх картинки
Возможности CSS3 иногда просто поражают своими способностями сделать одну идею несколькими
DLE - Хак attachment. Изменяем стандартный attachment
И до меня дошла мода на изменение аттачей, т.е. стилизации кнопки на скачивание файлов, залитых на

Комментарии

b
i
u
s
|
left
center
right
|
emo
color
|
hide
quote
translit
Включите эту картинку для отображения кода безопасности
обновить, если не виден код
Категории блога
  1. Популярное
  2. Последнее
  3. Полезное
  • DLE - Модуль форума SimpleBB 1.1
  • Несколько советов по улучшению вашего сайта
  • DLE - выводим все значения дополнительных полей. Модуль XFList
  • Super Markup World - пиксельная мини-игра для фанатов HTML и CSS
  • Министерство обороны США перейдет на Windows 10
  • Opera Software продаётся в Китай
  • Tesla Motors получила домен tesla.com
  • DLE - передаем блок тизеров из новостей на на сторонний сайт
  • Teaser.bz - автоматически заработок на плагине в барузере
  • Internet Explorer потерял лидерство среди браузеров
  • Майк Монтейро - Дизайн это работа
  • Sarafanka обновилась, перешла на доллары и выплачивает старые долги
  • ClaimBTC - кран биткоинов на русском языке
  • Тео Компернолле - Мозг освобожденный
  • Primedice - заработок биткоинов на полном автомате
  • SEO - ключевые слова, 10 инструментов для подбора семантики
  • Базовые советы по повышению собственной продуктивности
  • RSS - Как следить за соц. сетями с помощью новостной ленты
  • DLE - Модуль форума SimpleBB 1.1
  • JS - Скрипт от Яндекса для владельцев старых браузеров
  • Список жирных форумов для обратных ссылок с профилей
  • Лучшие буксы и почтовики. Сводная таблица и статистика
  • Магический квадрат - умная система, читающая ваши мысли!
  • Таблица цветов HTML
  • Информация о том, как зарабатывать в сети
  • Гайд по Shillien Knight для Lineage 2: High Five part 5
  • Заработай


    • LOGIN
    © 2010-2015 artemmian.ru v 7.0: flexyflat tpl Designed by artstudios
    Карта сайта HTML • Карта сайта XML • Правообладателям
    Поисковый анализ сайта