Кнопка Наверх

jQuery для начинающих

Кнопка Наверх

Сообщение Александр » 11 сен 2011, 15:10

Кнопка Наверх
JavaScript, Jquery, HTML, CSS

В этом уроке вы узнаете как сделать на своём сайте плавающую кнопку "Наверх" как ВКонтакте. При нажатии на кнопку, страница плавно прокрутится вверх.
Так же в уроке описан способ добавления кнопки в блог на Wordpress.

Пример работы скрипта Чтобы увидеть ссылку - зарегистрируйтесь

1. Скачиваем плагин для jQuery - jQuery.ScrollTo
Заходим на страницу http://flesler.blogspot.com/2007/10/jqueryscrollto.html и находим Downloads. Нужно скачать jQuery.ScrollTo Minified(recommended)
В сжатом виде этот плагин весит всего 2кб.
Плагин ScrollTo нужен для плавной прокрутки окна.


2. Код html страницы
  1. <!doctype html>
  2. <html>
  3. <head>
  4. <title>Скрипт плавающей кнопки «Наверх»</title>
  5. <script type="text/javascript" src="http://code.jquery.com/jquery-1.6.3.min.js"></script>
  6. <script type="text/javascript" src="js/jquery.scrollTo-min.js"></script>
  7. <script type="text/javascript" src="js/scrollToTop.js"></script>
  8. <link href="style.css" rel="stylesheet" type="text/css" />
  9. </head>
  10. <body>
  11. <div id="top"></div>
  12.  
  13. <h1>Скрипт плавающей кнопки Наверх.</h1>
  14. <p style="margin-bottom:70%;">Крути вниз!</p>
  15. <p>Справа внизу должна появится кнопка «Наверх»</p>
  16. <p style="margin-bottom:70%;"><a href="http://flapps.ru">http://flapps.ru</a></p>
  17. <p>Низ страницы</p>
  18.  
  19. <div id="scrollToTop"><a href="#top" id="toTopLink">Наверх</a></div>
  20. </body>
  21. </html>

В этом коде мы подключаем jQuery, скаченный ранее плагин scrollTo-min.js и scrollToTop.js - в котором будет основной код скрипта.

Для того чтобы скрипт работал, надо в начале страницы вставить код

а в конце страницы вставить код
  1. <div id="scrollToTop"><a href="#top" id="toTopLink">Наверх</a></div>


Файлы scrollTo-min.js и scrollToTop.js должны быть в папке js.
Файл style.css - оформление кнопки Наверх. Файл должен находится в одной папке с html файлом.


3. Код скрипта scrollToTop.js
  1. $(function () {
  2.     var scroll_timer;
  3.     var displayed = false;
  4.     var $message = $('#scrollToTop');
  5.     var $window = $(window);
  6.     // узнаём позицию блока #top
  7.     var top = $(document.body).children(0).position().top;
  8.  
  9.     // функция при прокрутке
  10.     $window.scroll(function () {
  11.         window.clearTimeout(scroll_timer);
  12.         scroll_timer = window.setTimeout(function () { // используем таймер
  13.             if($window.scrollTop() <= top+200) // скрываем, если позиция блока #top и текущий вид окна совпадают. +200 - для того чтобы показывать кнопку Наверх как минимум при прокрутке окна вниз на 200 пикселей
  14.             {
  15.                 displayed = false;
  16.                 $message.fadeOut(500);
  17.             }
  18.             else if(displayed == false) // показываем кнопку «Наверх»
  19.             {
  20.                 displayed = true;
  21.                 $message.stop(true, true).fadeIn(500).click(function () { $message.fadeOut(500); });
  22.             }
  23.         }, 100);
  24.     });
  25.    
  26.     // клик по кнопке наверх
  27.     $('#scrollToTop').click(function(e) {
  28.         e.preventDefault();
  29.         $.scrollTo(0,300);
  30.        });
  31. });



4. Код файла стилей style.css
  1. #scrollToTop {
  2.     display: none;
  3.  
  4.     z-index: 999;
  5.     opacity: .6;
  6.    
  7.     position: fixed;
  8.     top: 100%;
  9.     right: 20px;
  10.     margin-top: -50px;
  11.     margin-left: -80px;
  12.    
  13.     -moz-border-radius: 6px;
  14.     -webkit-border-radius: 6px;
  15.     border-radius: 6px;
  16.    
  17.     width: 70px;
  18.     line-height: 16px;
  19.     height: 16px;
  20.     padding: 10px;
  21.     background-color: #000;
  22.     text-align: center;
  23.     cursor:pointer;
  24. }
  25.  
  26. #scrollToTop a {
  27.     font-family:Arial, Verdana, sans-serif;
  28.     font-size:12px;
  29.     color:#fff;
  30. }



5. Скрипт готов!

Исходник Чтобы увидеть ссылку - зарегистрируйтесь


Добавление кнопки «Наверх» в блог на WordPress

1. Заходим в папку /wp-content/themes/НАЗВАНИЕ/
- в папку js копируем файлы scrollTo-min.js и scrollToTop.js
- в файл style.css добавляем стиль кнопки описанный выше

2. В файл header.php между <head></head> добавляем код
  1. <script src="http://code.jquery.com/jquery-1.6.3.min.js" type="text/javascript"></script>
  2. <script type="text/javascript" src="/wp-content/themes/НАЗВАНИЕ/js/jquery.scrollTo-min.js"></script>
  3. <script type="text/javascript" src="/wp-content/themes/НАЗВАНИЕ/js/scrollToTop.js"></script>

Сразу после <body> добавляем


3. В файл footer.php прямо перед </body> добавляем
  1. <div id="scrollToTop"><a href="#top" id="toTopLink">Наверх</a></div>


4. Закачиваем файлы header.php и footer.php
Всё готово.

За это сообщение автора Александр поблагодарили - 2:
Chianuk, seokay
Аватара пользователя
Александр
Создатель сайта
Создатель сайта
 
Автор темы
Сообщения: 4574
Зарегистрирован: 27 сен 2009, 16:45
Откуда: Санкт-Петербург
Благодарил (а): 126 раз.
Поблагодарили: 771 раз.

Чтобы убрать блок с рекламой, зарегистрируйтесь на форуме или войдите.

Google
 



Re: Кнопка Наверх

Сообщение philipp » 13 апр 2012, 20:14

Спасибо, протестировал. Все работает!
Пермский край - Пермь
philipp

 
Сообщения: 1
Зарегистрирован: 13 апр 2012, 19:43
Откуда: Пермь
Благодарил (а): 0 раз.
Поблагодарили: 0 раз.

Re: Кнопка Наверх

Сообщение coka1n » 29 май 2012, 09:23

Спасибо)
coka1n

 
Сообщения: 1
Зарегистрирован: 29 май 2012, 09:22
Благодарил (а): 0 раз.
Поблагодарили: 0 раз.

Re: Кнопка Наверх

Сообщение volk007 » 24 июн 2012, 16:30

А у меня почему то не выводится эта кнопка(
volk007

 
Сообщения: 1
Зарегистрирован: 24 июн 2012, 15:43
Благодарил (а): 0 раз.
Поблагодарили: 0 раз.

Re: Кнопка Наверх

Сообщение Александр » 25 июн 2012, 21:44

volk007
Пример не работает или уже в другом коде?
Аватара пользователя
Александр
Создатель сайта
Создатель сайта
 
Автор темы
Сообщения: 4574
Зарегистрирован: 27 сен 2009, 16:45
Откуда: Санкт-Петербург
Благодарил (а): 126 раз.
Поблагодарили: 771 раз.

Re: Кнопка Наверх

Сообщение Chianuk » 25 дек 2012, 16:35

Доброго времени суток. Работает в Firefox, Chrome. Но, ни в какую не работает в IE. Устал бороться. Как починить? Спасибо.

Пример с вашего сайта тоже в IE не работает. :(

За это сообщение автора Chianuk поблагодарил:
Александр
Аватара пользователя
Chianuk

 
Сообщения: 4
Зарегистрирован: 25 дек 2012, 16:30
Благодарил (а): 1 раз.
Поблагодарили: 1 раз.

Re: Кнопка Наверх

Сообщение Александр » 25 дек 2012, 21:39

Chianuk
Надо прописать доктайп
Аватара пользователя
Александр
Создатель сайта
Создатель сайта
 
Автор темы
Сообщения: 4574
Зарегистрирован: 27 сен 2009, 16:45
Откуда: Санкт-Петербург
Благодарил (а): 126 раз.
Поблагодарили: 771 раз.

Re: Кнопка Наверх

Сообщение Chianuk » 25 дек 2012, 22:59

Прописано:
  1. <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
Аватара пользователя
Chianuk

 
Сообщения: 4
Зарегистрирован: 25 дек 2012, 16:30
Благодарил (а): 1 раз.
Поблагодарили: 1 раз.

Re: Кнопка Наверх

Сообщение Александр » 25 дек 2012, 23:10

Chianuk
doctype должен быть правильным, иначе браузер будет работать в режиме Quirks mode, как и без указания доктайпа.
  1. <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">

Если разработка изначально велась с неправильным доктайпом, то после его изменения следует проверить корректность отображения верстки и работу всех остальных скриптов.
Аватара пользователя
Александр
Создатель сайта
Создатель сайта
 
Автор темы
Сообщения: 4574
Зарегистрирован: 27 сен 2009, 16:45
Откуда: Санкт-Петербург
Благодарил (а): 126 раз.
Поблагодарили: 771 раз.

Re: Кнопка Наверх

Сообщение Chianuk » 26 дек 2012, 00:07

ОК. Движок готовый, бесплатный. И были уже проблемы у меня, когда нужные мне скрипты не работали. А при изменении доктайпа к нужному виду - движок несло. Попробую покрутить. Спс.
Аватара пользователя
Chianuk

 
Сообщения: 4
Зарегистрирован: 25 дек 2012, 16:30
Благодарил (а): 1 раз.
Поблагодарили: 1 раз.

След.

Вернуться в Уроки jQuery



Кто сейчас на конференции

Сейчас этот форум просматривают: нет зарегистрированных пользователей и гости: 0

cron