JavaScript, Jquery, HTML, CSS
В этом уроке вы узнаете как сделать на своём сайте плавающую кнопку "Наверх" как ВКонтакте. При нажатии на кнопку, страница плавно прокрутится вверх.
Так же в уроке описан способ добавления кнопки в блог на Wordpress.
Пример работы скрипта http://flapps.ru/example/jquery/scroll- ... o-top.html
1. Скачиваем плагин для jQuery - jQuery.ScrollTo
Заходим на страницу http://flesler.blogspot.com/2007/10/jqueryscrollto.html и находим Downloads. Нужно скачать jQuery.ScrollTo Minified(recommended)
В сжатом виде этот плагин весит всего 2кб.
Плагин ScrollTo нужен для плавной прокрутки окна.
2. Код html страницы
Код: Выделить всё
<!doctype html><html><head><title>Скрипт плавающей кнопки «Наверх»</title><script type="text/javascript" src="http://code.jquery.com/jquery-1.6.3.min.js"></script><script type="text/javascript" src="js/jquery.scrollTo-min.js"></script><script type="text/javascript" src="js/scrollToTop.js"></script><link href="style.css" rel="stylesheet" type="text/css" /> </head><body><div id="top"></div> <h1>Скрипт плавающей кнопки Наверх.</h1><p style="margin-bottom:70%;">Крути вниз!</p><p>Справа внизу должна появится кнопка «Наверх»</p><p style="margin-bottom:70%;"><a href="http://flapps.ru">http://flapps.ru</a></p><p>Низ страницы</p> <div id="scrollToTop"><a href="#top" id="toTopLink">Наверх</a></div> </body></html>Для того чтобы скрипт работал, надо в начале страницы вставить код
Код: Выделить всё
<div id="top"></div>Код: Выделить всё
<div id="scrollToTop"><a href="#top" id="toTopLink">Наверх</a></div> Файл style.css - оформление кнопки Наверх. Файл должен находится в одной папке с html файлом.
3. Код скрипта scrollToTop.js
Код: Выделить всё
$(function () { var scroll_timer; var displayed = false; var $message = $('#scrollToTop'); var $window = $(window); // узнаём позицию блока #top var top = $(document.body).children(0).position().top; // функция при прокрутке $window.scroll(function () { window.clearTimeout(scroll_timer); scroll_timer = window.setTimeout(function () { // используем таймер if($window.scrollTop() <= top+200) // скрываем, если позиция блока #top и текущий вид окна совпадают. +200 - для того чтобы показывать кнопку Наверх как минимум при прокрутке окна вниз на 200 пикселей { displayed = false; $message.fadeOut(500); } else if(displayed == false) // показываем кнопку «Наверх» { displayed = true; $message.stop(true, true).fadeIn(500).click(function () { $message.fadeOut(500); }); } }, 100); }); // клик по кнопке наверх $('#scrollToTop').click(function(e) { e.preventDefault(); $.scrollTo(0,300); });});4. Код файла стилей style.css
Код: Выделить всё
#scrollToTop { display: none; z-index: 999; opacity: .6; position: fixed; top: 100%; right: 20px; margin-top: -50px; margin-left: -80px; -moz-border-radius: 6px; -webkit-border-radius: 6px; border-radius: 6px; width: 70px; line-height: 16px; height: 16px; padding: 10px; background-color: #000; text-align: center; cursor:pointer;} #scrollToTop a { font-family:Arial, Verdana, sans-serif; font-size:12px; color:#fff;}5. Скрипт готов!
Исходник http://flapps.ru/example/jquery/scroll- ... to-top.rar
Добавление кнопки «Наверх» в блог на WordPress
1. Заходим в папку /wp-content/themes/НАЗВАНИЕ/
- в папку js копируем файлы scrollTo-min.js и scrollToTop.js
- в файл style.css добавляем стиль кнопки описанный выше
2. В файл header.php между <head></head> добавляем код
Код: Выделить всё
<script src="http://code.jquery.com/jquery-1.6.3.min.js" type="text/javascript"></script><script type="text/javascript" src="/wp-content/themes/НАЗВАНИЕ/js/jquery.scrollTo-min.js"></script><script type="text/javascript" src="/wp-content/themes/НАЗВАНИЕ/js/scrollToTop.js"></script>Код: Выделить всё
<div id="top"></div>Код: Выделить всё
<div id="scrollToTop"><a href="#top" id="toTopLink">Наверх</a></div>Всё готово.
