На сайтах с большим количеством контента (например, блоги) просто необходимо использовать кнопку «Наверх». Ведь пользователю, прочитавшему большую статью, может понадобиться вернуться в верхнюю часть страницы для продолжения навигации по сайту. Или посетитель, перед тем как прочитать статью полностью, пролистывает ее от начала до конца и пробегает глазами по заголовкам, картинкам, схемам, чтобы заранее оценить, стоит читать статью или нет. Обычно, в таких случаях, при отсутствии кнопки «Вверх», посетитель просто скролит страницу вверх колёсиком мыши или при помощи скрола (в боковой части браузера).
Поэтому, для удобства навигации сайта, применяется кнопка прокрутки страницы вверх. Создать такую кнопку можно как без использования JavaScript (только с помощью CSS), так и с ним. Рассмотрим самые простые реализации этих способов.
Кнопка наверх: HTML+CSS
Преимущество данного способа — простота в использовании (не нужно использовать дополнительные библиотеки или скрипты).
Сначала нужно создать ссылку ‘#’, а затем оформить её так, как нам нужно:
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>Кнопка наверх с помощью CSS - "Нубекс"</title> <style> .topNubex { position: fixed; right: 45px; bottom: 45px; } </style> </head> <body> <div style="height:3000px"></div> <a href="#" title="Вернуться к началу страницы" class="topNubex">Вверх</a> </body> </html>
К недостаткам данного способа относится то, что в таком случае прокрутка не может быть плавной и посетитель мгновенно перенаправляется в верхнюю часть страницы.
Кнопка наверх: JavaScript
Приведенный ниже способ использует библиотеку JQuery. Он прост в использовании и позволяет сделать прокрутку страницы плавной.
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>Кнопка "Вверх" при помощи JavaScript - "Нубекс"</title> <style> #topNubex { position: fixed; right: 45px; bottom: 45px; } </style> <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script> <script type="text/javascript"> $(function() { $(window).scr.
tml>В этом примере в качестве фона кнопки используется картинка. Можно настроить отображение кнопки при помощи CSS-стилей (размер, цвет, обводка, прозрачность и т.д.). Таким образом, этот способ является более гибким и предоставляет больше возможностей при добавлении кнопки «Наверх» на сайт.
nubex.ru
Простая кнопка вверх для сайта
Первый самый простой способ добавления кнопки вверх для сайта требует минимум усилий для подключения, но при этом кнопка получиться максимально простой, и у нее не будет эффектов появления и плавной прокрутки.
Суть способа заключается в том, что мы при помощи HTML добавляем в самом конце страницы, перед закрытием тега body, код копки:
После чего нам нужно дописать несколько CSS-стилей:
Вот, что у нас получится:
Так же можно дописать стили, которые будут срабатывать при наведении указателя мышки:
При наведении кнопка будет становиться насыщеннее:
JQuery кнопка вверх для сайта
Второй способ немного посложней, но в результате вы получите красивую анимированную кнопку с плавной прокруткой к началу страницы.
Суть способа заключается в подключении к сайту специального JQuery-плагина, который вы можете скачать по этой ссылке:
После скачивания архива вам нужно сделать следующее:
- 1.Разархивируем архив. В нем находятся три папки, которые нужно загрузить в корневую папку сайта на хостинге, или в папку с темой сайта. Это можно сделать при помощи FTP-клиента или через файловый менеджер хостинга.
Файлы index и readme.md для работы плагина не нужны, их можно не загружать на хостинг.
- 2.Далее нам нужно подключить скрипт плагина на страницах нашего сайта. Для этого нужно через Notepad++ подключиться к сайту по FTP и открыть файл страницы сайта или файл шаблона темы, в случае если сайт сделан на CMS.
Для WordPress нужно открыть файл подвала страницы с названием footer.php.
- 3.Перед закрытием тега <body> нам нужно вставить следующий скрипт:
- 4.Далее нам нужно подключить CSS-стили кнопки. Сделать это мы можем двумя способами:
- 1.Можно подключить файл стилей плагина к сайту, добавив между тегами следующую строку:
- 2.Или же можно поступить по-другому, и вставить стили плагина в файл стилей нашего сайта.
Для этого нужно открыть файл ui.totop.css, который находится в папке css плагина, и скопировать все стили, которые находятся в нем.
После чего открываем в Notepad++ файл стилей нашего сайта и в самом низу вставляем скопированные стили. После этого не забываем сохранить и выгрузить файл на хостинг.
Если все сделано правильно, то в результате мы получим вот такую кнопку вверх на страницах своего сайта:
Если вам не нравиться дизайн кнопки вы можете заменить изображение в папке img на свое. Это можно сделать при помощи PhotoShop, взяв за основу эту картинку и поменяв, к примеру, ее цвет.
На сегодня у меня все. Надеюсь, показанные в этой статье способы создания кнопки вверх для сайта будут для вас полезны. Если данная статья была для вас полезной, обязательно оставьте комментарий и подпишитесь на мою рассылку.
До встречи в следующих статьях!
С уважением Юлия Гусарь
impuls-web.ru
Здравствуйте! Пример скрипта можно посмотреть в этом блоге, когда вы прокручиваете страницу вниз, 
в правом нижнем углу появляется картинка-кнопка «Наверх», нажав на которую вы попадете к верхней шапке сайта.
Под каждым примером с картинкой вы найдете код (скрипт), который надо вставить перед закрывающимся тегом «</body>»
Три небольших момента для корректной установки:
- Кодировка сайта должна быть в UTF-8, если будет другая то вместо русских букв — будут непонятные крякозяблики
- Надо чтобы на сайте была подключена библиотека jquery. Подключить ее можно вставив в шаблоне сайта перед«</head>» следующий код:
- Если у вас на сайте в дизайне прописан z-index (признак — не видно картинку {или видно, но только на некоторых участках сайта}), вам надо прописать в стилях к сайту следующую строчку:
#topcontrol{z-index: 9999;} - Если нужно изменть положение картинки то воспользуйтесь стилем margin:
#topcontrol{margin-bottom: 50px;}
1. 
<script type="text/javascript" src="//web-ptica.ru/VRV-files/knopkavverh/1.js"></script>
2. 
<script type="text/javascript" src="//web-ptica.ru/VRV-files/knopkavverh/2.js"></script>
3.
<script type="text/javascript" src="//web-ptica.ru/VRV-files/knopkavverh/3.js"></script>
4.
<script type="text/javascript" src="//web-ptica.ru/VRV-files/knopkavverh/4.js"></script>
5.
<script type="text/javascript" src="//web-ptica.ru/VRV-files/knopkavverh/5.js"></script>
6.
<script type="text/javascript" src="//web-ptica.ru/VRV-files/knopkavverh/6.js"></script>
7.
<script type="text/javascript" src="//web-ptica.ru/VRV-files/knopkavverh/7.js"></script>
8.
<script type="text/javascript" src="//web-ptica.ru/VRV-files/knopkavverh/8.js"></script>
9.
<script type="text/javascript" src="//web-ptica.ru/VRV-files/knopkavverh/9.js"></script>
10.
<script type="text/javascript" src="//web-ptica.ru/VRV-files/knopkavverh/10.js"></script>
11.
<script type="text/javascript" src="//web-ptica.ru/VRV-files/knopkavverh/11.js"></script>
12.
<script type="text/javascript" src="//web-ptica.ru/VRV-files/knopkavverh/12.js"></script>
13.
<script type="text/javascript" src="//web-ptica.ru/VRV-files/knopkavverh/13.js"></script>
14.
<script type="text/javascript" src="//web-ptica.ru/VRV-files/knopkavverh/14.js"></script>
15.
<script type="text/javascript" src="//web-ptica.ru/VRV-files/knopkavverh/.js"></script>
16.
<script type="text/javascript" src="//web-ptica.ru/VRV-files/knopkavverh/16.js"></script>
17.
<script type="text/javascript" src="//web-ptica.ru/VRV-files/knopkavverh/17.js"></script>
18.
<script type="text/javascript" src="//web-ptica.ru/VRV-files/knopkavverh/18.js"></script>
19.
<script type="text/javascript" src="//web-ptica.ru/VRV-files/knopkavverh/19.js"></script>
20.
<script type="text/javascript" src="//web-ptica.ru/VRV-files/knopkavverh/20.js"></script>
21.
<script type="text/javascript" src="//web-ptica.ru/VRV-files/knopkavverh/21.js"></script>
22.
<script type="text/javascript" src="//web-ptica.ru/VRV-files/knopkavverh/22.js"></script>
23.
<script type="text/javascript" src="//web-ptica.ru/VRV-files/knopkavverh/23.js"></script>
24.
<script type="text/javascript" src="//web-ptica.ru/VRV-files/knopkavverh/24.js"></script>
25.
<script type="text/javascript" src="//web-ptica.ru/VRV-files/knopkavverh/25.js"></script>
26.
<script type="text/javascript" src="//web-ptica.ru/VRV-files/knopkavverh/26.js"></script>
27.
<script type="text/javascript" src="//web-ptica.ru/VRV-files/knopkavverh/27.js"></script>
Простая кнопка «Наверх» без JavaScript
Существует очень простой способ предоставить пользователю такой функционал. Этот способ не требует задействования каких либо библиотек или дополнительных скриптов и делается исключительно при помощи HTML и при желании с задействованием CSS, путем создания обыкновенной внутренней ссылки.
Для того, чтобы это сделать в любом месте, внизу вашей страницы, просто добавьте следующий код:
^Наверх
Как вы видите ссылке задан класс .topbutton используя который, при помощи CSS, вы можете придать ссылке любой, необходимый вам вид, например вид той же кнопки.
В стили вашего сайта, обычно они находятся в файле style.css надо вставить:
.topbutton { width:100px; border:2px solid #ccc; background:#f7f7f7; text-align:center; padding:10px; position:fixed; bottom:50px; right:50px; cursor:pointer; color:#333; font-family:verdana; font-size:12px; border-radius: 5px; -moz-border-radius: 5px; -webkit-border-radius: 5px; -khtml-border-radius: 5px; }
Недостатки:
— Кнопки сделанные с применением JavaScript могут быть плавающими и появляться сразу как только пользователь спустился немного в низ по странице, а в приведенном примере она будет отображаться постоянно.
— Прокрутка не будет плавной и после нажатия пользователь будет мгновенно перенаправлен вверх страницы.
Плюсы данного вида кнопки:
+ Для работы кнопки не нужно задействовать скрипты и большие, по объему, библиотеки. И это очень большой плюс.
Кнопки прокрутки вверх и вниз на JQUERY
Данное решение позволяет перемещаться как вниз так и вверх страницы т. к. состоит из двух кнопок. Кнопки фиксировано располагаются в левой части страницы. При произведении скроллинга кнопки плавно мерцают.
- Название: Кнопки прокрутки вверх и вниз на JQUERY
- Ссылка: scroll.zip 57.72 KB
- Формат: ZIP архив
В скачанном архиве будут находится все файлы необходимые для функционирования кнопки. Это CSS, JS файлы и файлики изображений стрелок.
Кнопка плавной прокрутки вверх при помощи JQuery
Еще один вариант организации плавной прокрутки содержимого страницы, с низу вверх, при помощи JQuery. Кнопка находится в правой нижней части страницы и появляется только если немного проскролить страницу вниз. Все реализовано при помощи небольшого кусочка CSS и JS кода, а так же небольшой картинки использующейся в качестве кнопки.
Мне эта кнопка нравится тем, что для ее создания не требуется большое количество скриптов при этом она имеет неплохие эффекты.
Теперь разберемся, что нужно сделать для подключения кнопки к сайту
Изображение:
Вам понадобится изображение самой кнопки можете взять любое, а можете использовать вот это:
Скачать стрелку .png
HTML код:
Для вызова кнопки после основного контента страницы или перед тегом
web-ptica.ru
Скачать
Вместе со стрелками в архиве находится скрипт, без которого стрелочки не получат плавного перехода, или вообще не будут работать!
После скачивания архива, разархивируйте его, данный скрипт закиньте через Ftp клиент в корень сайта — папочка /public_html. А картинки можете загрузить через свою админ. панель вашего сайта — ну чтобы сильно себя не запутывать!
Прописываем путь к стрелкам в нашем коде и вставляем его в подвал! Сохраняем и любуемся их работоспособностью!
Как работают данные стрелочки можете посмотреть у меня на блоге! Я себе установил пока данный скрипт, а плагины пойду удалю и вам советую:)
Как сделать прокрутку на сайте с помощью скриптов? Так, немного разобрались! Идем дальше…
infonion.ru
Для чего нужна данная кнопка и в каких случаях ее лучше всего использовать
Когда на странице сайта расположено большое количество контента пользователь ознакомившись с ним и промотав страницу до определенного момента или до самого низа, часто начинает скролить ее верх, чтобы увидеть навигационные ссылки расположенные в верхней части страницы иили произвести какие-то действия.
Чтобы добавить удобства пользователям и в целом улучшить юзабилити своего сайта лучше всего использовать для сайта кнопку вверх, нажав на которую пользователь автоматически перенаправляется в верхнюю часть страницы.
1. Простая кнопка «Наверх» без JavaScript
Существует очень простой способ предоставить пользователю такой функционал. Этот способ не требует задействования каких либо библиотек или дополнительных скриптов и делается исключительно при помощи HTML и при желании с задействованием CSS, путем создания обыкновенной внутренней ссылки.
Для того, чтобы это сделать в любом месте, внизу вашей страницы, просто добавьте следующий код:
Как вы видите ссылке задан класс .topbutton используя который, при помощи CSS, вы можете придать ссылке любой, необходимый вам вид, например вид той же кнопки.
Пример CSS кода:
Недостатки:
— Кнопки сделанные с применением JavaScript могут быть плавающими и появляться сразу как только пользователь спустился немного в низ по странице, а в приведенном примере она будет отображаться постоянно.
— Прокрутка не будет плавной и после нажатия пользователь будет мгновенно перенаправлен вверх страницы.
Плюсы данного вида кнопки:
+ Для работы кнопки не нужно задействовать скрипты и большие, по объему, библиотеки. И это очень большой плюс.
2. Кнопка наверх с помощью jQuery
Кнопка реализована достаточно просто. Для ее функционирования понадобится библиотека jQuery, небольшой скрипт содержащий события jQuery, определенные стили и тег DIV содержащий сам текст и необходимый ID.
Кнопка работает в браузерах начиная с версий Firefox 3.0.10 — 3.6.13, Internet Explorer 7 и 8, Google Chrome, Jquery 1.4.3. К сожалению кнопка не работает в IE 6, а оно вам надо 🙂 ?
JQuery JavaScript код:
Представленный ниже код вам необходимо вставить переде тегом </head> на всех страницах вашего сайта. Если библиотека jQuery уже подключена к вашему сайту, то первую строчку добавлять не нужно.
CSS код:
Чтобы придать красивый внешний вид кнопке необходимо добавить следующие стили. Их лучше всего добавить в файл стилей вашего сайта.
HTML код:
Для вызова кнопки добавьте следующий HTML код перед тегом </body>.
3. UItoTop JQuery плагин
Простой плагин делающий плавное появление кнопки и плавный скроллинг вверх при нажатии на ее. Чтобы задействовать плагин на своем сайте нет необходимости добавлять какие либо теги в разметку HTML страницы. Достаточно подключить все необходимые файлы плагина и он будет работать.
В представленном архиве находится 3 папки: css — файл стилей кнопки, img — изображение и папка js в которой находятся 4 JavaScript файла.
Подключение JavaScript файлов:
Распакуйте скачанный архив с исходниками в какую либо папку вашего сайта. Для задействования плагина нам достаточно подключить три из имеющихся js файлов. Для их подключения перед закрывающим тегом </body> добавьте следующие пути к файлам:
Пути ведущие к файлам исправьте в соответствии с тем в каком каталоге располагаются файлы плагина.
Обратите внимание, если ранее вы уже подключили к своему сайту библиотеку jQuery, то добавлять следующий код не нужно:
Добавление CSS:
Следующий шаг это добавление CSS стилей, без них кнопка не заработает. Подключить их можно двумя способами.
Первый способ это добавить на все страницы вашего сайта между тегами <head></head> ссылку на CSS файл стилей:
Не забудьте только изменить путь к файлу.
Второй способ это скопировать все содержимое файла ui.totop.css и вставить его в файл CSS стилей вашего сайта. Второй способ будет более рациональным так как не требует подключения лишних файлов.
4. Кнопки прокрутки вверх и вниз на JQUERY
Данное решение позволяет перемещаться как вниз так и вверх страницы т. к. состоит из двух кнопок. Кнопки фиксировано располагаются в левой части страницы. При произведении скроллинга кнопки плавно мерцают. Этот эффект вы можете увидеть просмотрев демо.
В скачанном архиве будут находится все файлы необходимые для функционирования кнопки. Это CSS, JS файлы и файлики изображений стрелок.
Подключить HTML:
Для начала нужно разместить HTML код вызова кнопок, на всех страницах сайта. Для этого поместите нижерасположенный текст сразу перед тегом </body>.
Подключение JavaScript:
Сразу после HTML кода, перед тегом </body> разместите код вызова необходимых JavaScript файлов и JQuery код.
Пути ведущие к JS файлам необходимо заменить на свои.
В первой строчке кода подключается библиотека JQuery, поэтому если ранее вы уже ее подключали к своему сайту, то ее необходимо убрать.
Далее следует подключение еще одного JS файла и код содержащий определенные функции, которые необходимо рассмотреть подробнее. Потому как про помощи их можно изменять некоторые параметры работы кнопок. Ниже приведен код с разъяснениями:
Подключение CSS:
Для того, чтобы добавить CSS просто подключите к страницам сайта файл style.css, находящийся в архиве с исходниками:
А самым лучшим вариантом будет скопировать стили этого файла и вставить их в файл стилей своего сайта.
5. Кнопка плавной прокрутки вверх при помощи JQuery
Еще один вариант организации плавной прокрутки содержимого страницы, с низу вверх, при помощи JQuery. Кнопка находится в правой нижней части страницы и появляется только если немного проскролить страницу вниз. Все реализовано при помощи небольшого кусочка CSS и JS кода, а так же небольшой картинки использующейся в качестве кнопки.
Мне эта кнопка нравится тем, что для ее создания не требуется большое количество скриптов при этом она имеет неплохие эффекты.
Теперь разберемся, что нужно сделать для подключения кнопки к сайту
Изображение:
Вам понадобится изображение самой кнопки можете взять любое, а можете использовать вот это: icon_top.png
HTML код:
Для вызова кнопки после основного контента страницы или перед тегом </body> разместите следующий HTML код:
CSS стили:
При помощи этого кода кроме внешнего вида мы определяем позицию кнопки и задаем отступы 100 px с права и 50 px снизу. Его лучше всего добавить в файл стилей вашего сайта.
JQuery:
Для начала подключаем библиотеку, если она еще не подключена для вашего сайта. Для этого между тегами <head>…</head>? вставляем следующее:
Затем сразу после подключения библиотеки необходимо расположить следующий код JQuery:
Первый ScrollTop — определяет текущее вертикальное положение полосы прокрутки и если оно становится больше 100 px, то автоматически появляется кнопка. Если хотите чтобы она появлялась раньше или позже изменить в необходимую сторону это значение.
Как вы видите есть еще два параметра — 0 — значит страница будет прокручена вверх до самого начала до нулевого пикселя, а 600 — это скорость анимации в миллисекундах.
Источник: http://gazpo.com/2012/02/scrolltop/
6. Анимированная кнопка перехода вверх
При прокрутке страницы на определенное количество символов вниз, слева в нижней части появляется большая кнопка со стрелочкой. При наведении курсора кнопка плавно загорается, а при клике происходит плавная прокрутка вверх.
Для создания кнопки используется изображение стрелки, CSS стили и JQuery.
Изображение:
Изображение стрелки использующееся для кнопки можете взять здесь: up-arrow.png
HTML код:
Для вызова кнопки используется следующий HTML код:
Но помещать его нужно непосредственно перед основным содержимым страницы, если поместить его перед закрывающим тегом </body>, то кнопка не будет работать.
И еще один важный момент, касающийся HTML кода. Тегу <body> вы должны присвоить идентификатор top.
В случае если тегу <body> уже присвоен определенный id, тогда в коде вызова кнопки, размещенном чуть выше, #top нужно заменить на #ваш-id
CSS код:
При помощи CSS заданы отступы и внешний вид кнопки, добавлено свойство transition: для создания эффекта задержки при наведении курсора. Вставлять его лучше в CSS файл вашего сайта.
JQuery код:
Первая строчка это подключение библиотеки JQuery, если у вас она уже подключена, то эту строчку не добавляйте. Остальной код добавьте между тегами <head>…</head>
При необходимости можете изменить следующие параметры:
- 100 — это количество пикселей, после прокрутки которого появляется кнопка;
- 0 — это значит что прокрутка будет производится до нулевого пикселя т. е. до самого верха.
- 800 — это скорость прокрутки в миллисекундах.
7. Полупрозрачная кнопка при помощи JQuery и CSS
Большая полупрозрачная кнопка вверх появляющаяся при скроллинге по центру страницы. Не заметить ее трудно. Сделана только при помощи JQuery и CSS.
Разбираемся с HTML:
Для работы кнопки основное содержимое страницы, которое должно прокручиваться, необходимо поместить между двумя тегами:
CSS код:
Здесь ничего особенного нет, просто вставьте данный код в файл CSS стилей вашего сайта.
jQuery код:
Первая строчка — это подключение библиотеки, если к вашему сайту она уже подключена значит опускаем ее. Весь код помещаем между тегами <head>…</head>.
Источник: http://briancray.com/posts/scroll-to-top-link-jquery-css/
Расширения для Joomla и плагины для WordPress позволяющие создавать кнопку «Наверх».
На мой взгляд на любой CMS лучше всего использовать одно из представленных выше решений, но если вы не знаете как подключить приведенные скрипты к своему сайту на Joomla или WordPress, то можете воспользоваться следующими готовыми, бесплатными расширениями и плагинами.
Расширения для Joomla:
Scroll to Top: http://extensions.joomla.org/extensions/structure-a-navigation/site-navigation/24769
Skyline Scroll to Top: http://extensions.joomla.org/extensions/structure-a-navigation/site-navigation/19772
Top of the Page: http://extensions.joomla.org/extensions/structure-a-navigation/site-navigation/16807
Плагины для WordPress:
Найти самые популярные плагины для создания такого функционала вы сможете по ссылке: http://wordpress.org/plugins/tags/scroll-to-top
Материал подготовлен проектом: WebMasterMix.ru
webmastermix.ru
Кнопка и прокрутка страницы вверх через HTML и CSS.
Тут все очень просто — реализуется такая кнопка по средствам, так называемого «якоря». Действия следующие:
Вверху страницы, в коде сразу после <body> или в блоке с меню, в общем в том месте до которого нужно прокрутить страницу, устанавливаем следующую конструкцию:
Где id — идентификатор ссылки.
Теперь нужно разместить саму ссылку-кнопку при нажатии на которую будет происходить прокрутка страницы к якорю. Её конструкцию можно расположить в любом удобном месте, т.к. положение кнопки определяется через CSS. Код такой:
А чтобы придать это конструкции вид кнопки добавим CSS, он будет примерно такой:
Или можно использовать готовое изображение кнопки в виде стрелки вверх или еще чего, это уже кому как. Тогда код для кнопки будет таким:
Минус такого подхода к реализации кнопки «Вверх» в том, что она будет видна, и вверху страницы тоже. Ну а плюсы что на неё не влияет включена ли поддержка JavaScript в браузере пользователя, для реализации такой кнопочки не нужно устанавливать ни плагинов, ни скриптов на сайт, которые поедают время и скорость его загрузки.
Скрипт jQuery для плавной прокрутки страницы вверх
Данный вариант не сильно отличается от предыдущего примера на HTML, но он призван упростить две вещи в реализации быстрого скроллинга — избавить от размещения якоря и сделать прокрутку страницы более плавной. Путь внедрения такой:
— Подключаем любую версию jQuery, лучше конечно последнюю.
— Затем добавляем на сайт скрипт представленный ниже:
— Размещаем в шаблоне блок с селектором .backtotop — блок, ссылку, кнопку.
— Задаем для него желаемый вид через CSS. Можно из предыдущего примера, только здесь, для примера, сделаем вариант с изображением:
Плюсы — легкость скрипта, красота работы, минусы — маленький функционал, а практически его и нет-то. Ведь не всегда требуется прокрутить страницу сайта только вверх, иногда хочется предоставить пользователю возможность вернуться к месту клика по кнопке или к самому низу страницы.
Но самым жизнеспособным и несомненно лучшим выполнением данной задачи, стал jQuery плагин (очень небольшой скрипт), предложенный by Craig Wilson, Ph.Creative еще в далеком 2009 году, который во всю используется и рекламируется по сей день. Представляю его вашему вниманию.
jQuery плагин прокрутки веб-страницы вверх
Вообще, по большому счету, прям-таки плагином этот скрип назвать как-то не особо и получается из-за его совершенно небольшого размера. Но при этом, он обладает всеми необходимым функционалом. Этот скрипт:
— плавно прокручивает страницу вверх;
— кнопка прокрутки не видна вверху страницы, а появляется когда часть уже прокручена и исчезает после возврата к верху;
— имеет маленький размер и работает во всех браузерах.
Итак, HTML код для кнопки:
Размещаем в любом подходящем месте шаблона, в Blogger это можно сделать в гаджете HTML/JavaScript.
Далее добавляем CSS
Кнопка с текстом:
Кнопка — изображение:
И собственно, размещаем сам jQuery плагин, как обычно, до закрывающего </head>
Вот такие три простых решения для того чтобы сделать красивую и удобную кнопку прокрутки страницы.
©http://magentawave.com
www.magentawave.com
HTML код вывода кнопки
Вставка блока
<div id="arrowup"></div>
CSS стили оформления кнопки
Код CSS стилей кнопки, который прикреплен к классу
#arrowup { position: fixed; right: 30px; /*позиция кнопки: отступ справа*/ bottom: 30px; /*позиция кнопки: отступ снизу*/ background: url(/images/arrowup.png); /*путь к изображению кнопки*/ width: 48px; /*размер кнопки по ширине*/ height: 48px; /*размер кнопки по высоте*/ cursor: pointer; display: none; opacity: 0.8; /*уровень прозрачности в статике*/ } #arrowup:hover { opacity: 1; /*уровень прозрачности при наведении*/ }
ilyakhasanov.ru
Привет, друзья. Сегодня я продолжаю делиться с вами полезными скриптами, а если говорить конкретно, то я расскажу вам историю о появлении на моем блоге кнопки вверх. Меня уже давно просили написать, как сделать такую же кнопочку, но мне было жалко «палить контору», но сегодня я вдруг передумал…
Так-то ничего нового я не расскажу, ведь в сети можно найти еще 100500 статей о том, как сделать кнопку вверх для сайта, на этом бы и стоило закончить сегодняшний пост, если бы не одно НО! Моя кнопка необычная, не такая как у всех – у меня кнопка от самого Яндекса…сейчас-сейчас я все расскажу 🙂
Как-то изначально так сложилось, что при ведении блога я решил отказаться от постраничной разбивки комментариев к постам. Не знаю почему, может не хотел плодить лишних страниц, а может и не верил, что у меня может быть более 50 комментариев к одному посту, так или иначе, свое мнение я не изменил до сих пор – все комментарии к постам выводятся одной страницей. Однако, вот незадача, некоторые посты на моем блоге набрали уже более 500 комментариев, и это не смотря на то, что я раз в месяц их подчищаю. Короче, это была предыстория – а результат такой, что пришлось добавить на блог кнопку вверх. В результате навигация по длинным постам с комментариями значительно упростилась.
Кнопку или сам скрипт я даже не искал, все это само попалось мне на глаза – на одном из сервисов Яндекса, увы, не помню на каком. Но раздумывать я не стал – раз дают надо брать!
Мне очень нравится выражение «Хорошие художники копируют, а гениальные — воруют», но вот я хоть и не художник, но ворую гениально 🙂 Да, кнопку, которую вы видите на моем блоге, я спер с Яндекса. Я не хотел пользоваться чьими-то инструкциями и скриптами, они все какие-то стремные, а тут раз уж сам Яндекс пользуется данным скриптом, значит он лучший.
NB: это не первая вещь, которую я «позаимствовал» у Яндекса, месяц назад я обнаружил на одной из промо-страниц «секретные» кнопки шаринга, о чем писал на форуме.
15 минут колупаний исходного кода и все исходники у меня! Но я вас избавлю от этого безобразия, с моей инструкцией вы сможете всего за 2 минуты заиметь красивую и работающую кнопочку!
alaev.info