Как сделать кнопку "наверх" как вКонтакте

« Предыдущая запись
 
  Следующая запись »
 

axe Как сделать кнопку "наверх" как вКонтакте Всем привет! Уже больше месяца хочу написать этот пост, но всё руки как-то не доходили. Ну, теперь дошли, наконец-то. Давать обещаний не буду, но теперь я постараюсь вновь восстановить свой прежний режим написания в блог, хотя бы раз в неделю. Ну да ладно, перейдём к делу.

Думаю как минимум 95% читателей зарегистрированы вКонтакте. Сидят они там или нет – сейчас не суть важно. В общем, до недавнего времени там была такая прикольная кнопочка "Наверх", которая появлялась после того, как мы прокручиваем вниз страницу ниже левого меню. Она появлялась в тему и была очень удобной и ненавязчивой. Сейчас мы попробуем её повторить!

Но перед этим отмечу лишь то, что неделю назад Контакт сменил эту кнопочку на такую, которая после возвращения наверх сможет вернуть вас вниз в то же самое место, откуда вы улетели наверх. Делается это несложно, но делать мы этого не будем. Лично я считаю идею любопытной, но бесполезной для большинства случаев. Если мы прочитали вниз докуда надо, а дальше читать нечего, то зачем сюда возвращаться?

Ладно, хватит демагогии, приступим к делу! Прежде всего приведу два мелких примера. Это две ссылки, кликнув по которым оказываешься на уровне того блока, который указан.

  • Первый пример – это классика HTML, а именно якоря.
    <a href="#main">Вверх</a>

    Кликнув по ссылке, вы попадёте на участок страницы с id под названием main. По сути - не обязательно вершина страницы, а любое удобное место. Минус один - переход происходит скачком. Чтобы этого не было, можно ссылочку сделать с плавной прокруткой...

  • Второй пример - плавная прокрутка при нажатии на ссылку.
    <a href="#" onclick="$('body').scrollTo('0px',1000, {axis:'y'})">Наверх</a>

    По клику вы плавно переноситесь в указанное место при помощи скрипта jQuery.

 

Это база. Зачем? А чтобы было! Вот теперь начнём делать кнопочку по типу вТентакли вКонтакте, и сперва возьмёмся за оформление.

a#move_up {
   position: fixed;
   top: 10px;
   display: none;

   width: 90px;
   height: 21px; 
   text-align: center;
   font: 12px Verdana;
   text-decoration: none;
   color: #2b587a;
   background: #e1e7ed;
   padding-top:5px;
   opacity:0.9;
   filter: alpha(opacity=90);
}
a#move_up:hover {
   color: #fff;
   background: #597da3;
}

Думаю не стоит пояснять, что мы задали оформление ссылки как блоку и зафиксировали её на странице. Думаю не стоит пояснять, что html-код этой ссылки будет выглядеть вот так:

<a id="move_up" href="#">Наверх</a>

А теперь подключаем jQuery и вводим скрипт.

<script type="text/javascript" src="jquery.min.js"></script>
<script type="text/javascript">
$(function () { 
    $(window).scroll(function () {
        if ($(this).scrollTop() > 100) $('a#move_up').fadeIn(); 
        else                           $('a#move_up').fadeOut(400); 
    });
    $('a#move_up').click(function () {
        $('body,html').animate({ 
            scrollTop: 0 Untitled1 Как сделать кнопку "наверх" как вКонтакте
        }, 800); 
        return false;
    });
});
</script>

И теперь, по традиции, разбираем построчно.

  1. Строки 1-3. Как это ни банально, подключаем и инициализируем jQuery.
  2. Строка 4. Вешаем на событие скроллинга тему, чтобы…
  3. Строки 5-6. …чтобы при прокрутке на 100 пикселов сверху появляется созданный блок, а при возвращении наверх – исчезает.
  4. Строка 8. Вешаем на ссылку событие, чтобы по клику…
  5. Строки 9-11. Чтобы по клику происходила прокрутка контента наверх (до тега хтмл/боди) со скоростью 800 мс.

Вот и всё! Получите-распишитесь за скрипт прокрутки как вТентакли.

Что же сказать напоследок? Ну, изучайте jQuery (или аналоги) и вы сможете не только это icon smile Как сделать кнопку "наверх" как вКонтакте

 

UPD: Огромное спасибо постоянному читателю EGORR за то, что оформил этот небольшой скриптик в полноценный плагин. Отличная работа! =)

 


1 звезда2 звезд3 звезд4 звезд5 звезд (голосов: 16, средний: 4.75 из 5)
Понравилась статья или журнал? Подписывайся на продолжение!
Отзывов: 85 на запись

"Как сделать кнопку "наверх" как вКонтакте"

  1. Дмитрий
    15/07/2011 at 0:14 Постоянная ссылка Цитировать

    О такой фигне писать стыдно

  2. Большое спасибо за статью! Уже сделал себе…

  3. 2Дмитрий, если вам не нравится и не нужно. это не значит. что другим это не пригодиться. К тому же здешний блог, как уже где-то в инфо написано, не только для тех кто в теме, но и для тех, кто только начинает фтыкать в тему.

    2Cyber Freak, всегда пожалуйста! =)

  4. О такой фигне писать стыдно

    Ну так не пишите :-)

    Скриншот из примера вставить бы в статью.

  5. Сдаётся мне, что ко мне подселяются тролли =)

    Спасибо за совет, уже вставил. Хотя не сказал бы, что мой пример сильно презентабельный=)

  6. Спасибо большое, Александр. Вы провидец, захожу на ваш блог регулярно проверить что новенькое. А тут ещё именно то что я хотел)))

  7. Всегда рад быть полезным =)

  8. О такой фигне писать стыдно

    Дмитрий, Господь с вами!.. Никакая работа не является стыдной(кроме разве судебных исполнителей…).
    Такие мелочи тоже кто-то должен делать. Дмитрий Иванович Менделеев чемоданы делал чтобы отдохнуть.
    Так что скажем вежливо автору этого полезного пустячка спасибо!
    Я же решил пойти дальше простой спасибы, и оформил сей нехитрый код в столь же нехитрый плагинчик. Оптимизировав кое-что. Он сам вставляет в страницу код кнопки и в head стиль кнопки. Позволяет менять все настройки.

    Архив с моей( нашей :-) ) поделкой я сейчас вышлю Александру. И если он сочтёт полезным , вы сможете плагин скачать здесь.

  9. egorr, большое спасибо за плагин, он уже прикреплён к статье, и отдельное спасибо за то, что постоянно читаешь =)

  10. Прекрасная статья, теперь можно спокойно делать длинные страницы :-)

  11. ага, и не париться, что кто-то сломает колёсико мышки =)

  12. Прекрасная статья, теперь можно спокойно делать длинные страницы :-)

    Что касается одностраничных сайтов…
    Можно взглянуть на вот это
    Только код глючный. Надо допиливать.
    Но хорошо демонстрирует работу плагина jquery.scrollTo.js

  13. На тему допиливания согласен, причём не из-за глюков (не смотрел в других браузерах, правда, поэтому ничего не заметил), а из-за удобства. надо бы неактивными кнопки делать, когда они уже не приведут ни к чему, а то сидишь тыркаешь, а потом врубаешь, что бы до конца списка дошёл. и в начале мне не нравится – нажимаешь вниз. он на 10 пикселов сдвигается ниже

  14. На длинных страницах можно бороться со скриптом ))) по средствам колесика

  15. кейтен
    01/08/2011 at 22:21 Постоянная ссылка Цитировать

    сам делал нечто подобное, тока юзал $(window).height()

  16. Здравствуйте! Вроде бы все сделал правильно. Но на сайте ничего не появилось. Какая может быть проблема? jquery.min.js-где взять этот файл? дримвивер пишет, что он не на локальном диске.

  17. все ок) Спасибо!

  18. Почему кнопка съезжает с изначального места немного левее?

  19. 23axap, или кнопкой pagedown )

    2Timur, потому что CSS :)

  20. Прикрутил к себе, мелочь не мелочь, а приятно.

    Только переписал, как кнопку с возможностью опуститься вниз :D

  21. дааа, верх-низ, какая разница, кому что больше нравится 8)

  22. Таки с возможностью попасть и вверх и вниз удобнее, хотя … смотря где)

  23. Мне чем-то понравилась доработка, где нажав наверх и оказавшись там, у нас появляется кнопка “Назад”, и мы можем вернуться туда, откуда приехали =)

  24. Не думаю, что стоит расширять(перегружать) приятный пустячок лишним функционалом.
    А вот написание плагинчика – расставителя якорей, маркеров на глубокой странице, может оказаться полезным.
    Я уже делал подобное для одного из проектов, когда на стадии тестирования задолбался по каталогам лазать…

  25. ммм, а как он выглядел? в плане чего где жмёшь и где всё запоминается и откуда вызывается?
    я так, из любопытства =)

  26. К сожалению показать не смогу. По двум причинам: 1 . это реализовано в админке сданного уже заказчику сайта и 2 . код писан второпях, на коленке, посему предъявлять такое никак нельзя.
    И кое-что хочется переделать, оптимизировать. В плане алгоритмики…
    Как рожу – покажу! :)

  27. окей =)

  28. Evgeniy Artemyev
    10/10/2011 at 9:54 Постоянная ссылка Цитировать

    По моему якоря всю жизнь оформлялись через id=”", а href работает не везде.

  29. ну, да, указываем ид, а потом в нужной ссылке указываем href=”#идешник”
    ещё можно отсылать не к id, а к name, но я не знаю что и как лучше, поэтому всегда отправляют по id

  30. В мозиле не работает! в чём может быть причина?

  31. выложенный пример не работает в мозиле? версию мозилы в студию

  32. на что нужно заменить $(‘body,html’).animate({
    чтобы прокрутка шла вниз документа?

  33. менять нужно не это, а значение scrollTop. оно должно быть равно высоте страницы, либо можно попробовать поставить значение 10000

  34. Спасибо, за урок поставил себе на сайт такую кнопку.

  35. ю а велкам =)

  36. Виктория
    27/11/2011 at 19:02 Постоянная ссылка Цитировать

    У меня на сайте стоит галерея Colorbox. Так вот когда я ставлю такую кнопочку у меня галерея не работает ( Можно сделать так, чтобы и галерея и кнопочка работали на одном сайте? Заранее спасибо!

  37. Должно работать. Пример в студию =)

  38. У меня на сайте стоит галерея Colorbox. Так вот когда я ставлю такую кнопочку у меня галерея не работает ( Можно сделать так, чтобы и галерея и кнопочка работали на одном сайте? Заранее спасибо!

    С коясками работаем по такой примерно схеме:
    проверяем
    актуальность библиотек,
    правильность путей подключения файлов,
    правильность порядка подключения(очередности загрузки) файлов,
    валидность HTML разметки с точки зрения валидатора,
    работу скрипта в разных браузерах.
    Смотрим что говорит нам FireBug, читаем доки по noConflict Предупреждение конфликтов
    Обычно этих мер бывает достаточно.

  39. Виктория
    28/11/2011 at 21:57 Постоянная ссылка Цитировать

    Спасибо, я разобралась. Сейчас все работает.

  40. Спасибо :-)

  41. Пожалуйста =)

  42. Даурен
    23/12/2011 at 20:58 Постоянная ссылка Цитировать

    Спасибо за урок! но я не могу найти jquery.min.js потом куда вставить этот код в начале страницы? <a href="#" onclick="$('body').scrollTo('0px',1000, {axis:'y'})">Наверх</a>

  43. Даурен
    23/12/2011 at 21:00 Постоянная ссылка Цитировать

    или это тож работает как <a name="metka"></a><a href="#metka"></a>? спасибо заранее!!!

  44. Даурен, в архиве с плагином есть семпл, посмотрев который вы во всем разберётесь. Загляните туда.

  45. Даурен
    24/12/2011 at 10:15 Постоянная ссылка Цитировать

    Разобрался, я просто не увидел кнопку) она похожа на неактивную кнопку, Спасибо огромное!!!

  46. Евгений
    09/02/2012 at 16:43 Постоянная ссылка Цитировать

    Надоело уже возиться и тыкаться.
    width: 90px; – вконтакте гораздо удобнее чем? тем, что ширина не какое-то определенное количество пикселей, а плавающая, зависящая от ширины окна.
    у меня сайт тоже не резиновый, как сделать, чтобы этот width был равен текущей ширине окна минус ширина сайта, и делить всё на два?

  47. Все очень просто.
    Читаем маны h**p://api.jquery.com/category/dimensions/ и делаем.

  48. Евгений
    09/02/2012 at 16:57 Постоянная ссылка Цитировать

    да я русских уже кучу пособий прочел и всяко-разно делал, но вечно что-то да не то, а вы мне подсовываете отдаленное английское..
    ссылки на учебники по скриптам и пр. я б уж нашел, спасибо..
    но нигде не видел рабочей версии подобной идеи. везде эта кнопка определенно ширины и высоты. а как сделать их зависящими от этих самых .innerWidth() и .innerHeight()?
    и вопрос второй, как сделать что параметр width, зависящий от .innerWidth(), менялся обновлялся при изменении размера окна?
    вот. хотя б пример найти такого сайта и оттуда выковырять что ли:)

    а кстати, посмотрел как работает .innerWidth() и прочие представленные там – отображается совсем не требуемая ширина браузера, а лишь рабочей области.
    да и это фигня, нужные функции найти легко, впаять их – проблема

  49. Евгений
    09/02/2012 at 17:12 Постоянная ссылка Цитировать

    И, насколько я понял, это ж css? А width() и height() не могут вернуть размеры окна и документа.
    Но ведь как-то же это можно сделать! Жаль Дурова не спросить XD

  50. Александр Шуйский
    13/02/2012 at 13:06 Постоянная ссылка Цитировать

    Ммм, думаю ещё будет полезно почитать вот это. Тут про определение ширины экрана и браузера.
    http://shublog.ru/ajax/jquery/kak-opredelit-razreshenie-ekrana-i-razmer-okna-brauzera/

  51. Евгений
    13/02/2012 at 17:26 Постоянная ссылка Цитировать

    да видал я данный пример, что толку.
    это как теоретические полеты на луну, которые состоялись в теории задолго до армстронга.
    рабочего варианта-то не видать нигде)

  52. Евгений, вы хотите чтобы кто-то за вас это сделал?
    Приведённых вам ссылок достаточно, чтобы разобраться в вопросе и за три минуты написать пару строк кода.

  53. Евгений
    13/02/2012 at 17:44 Постоянная ссылка Цитировать

    так в том-то и дело, что недостаточно, и просидел я три часа за этим вопросом.
    в смысле “за меня”? хочу хотя бы верного направления, а не “чего-то-там-близкого-по-теме-вроде-вот-ссылочка-на-матчасть”, пользуясь которыми можно решить проблемы лишь теоретически. а работать не будет

  54. ПОЛНАЯ ХУЕТА

  55. Александр Шуйский
    29/02/2012 at 15:53 Постоянная ссылка Цитировать

    Спасибо, что нашёл время написать содержательный и интеллектуальный комментарий ;)

  56. Спасибо, отличная статья.

  57. Александр Шуйский
    05/03/2012 at 20:04 Постоянная ссылка Цитировать

    Спасибо, стараемся!=)

  58. Алексей
    27/03/2012 at 23:15 Постоянная ссылка Цитировать

    Спасибо) Описано понятно. Сам js начал проходить и все понял) Новичкам будет полезно глянуть.

  59. Александр Шуйский
    28/03/2012 at 8:13 Постоянная ссылка Цитировать

    Спасибо за отзыв! Надеюсь ещё найдёте чего-нибудь полезного ;)

  60. Типо яя
    17/04/2012 at 9:19 Постоянная ссылка Цитировать

    Сделал на основе этого скрипта 2 кнопки вверх и вниз всё работает но хотелось бы чтоб кнопка вниз становилась невидимой в конце страницы не подскажете как сделать чтоб при опускании к низу кнопка исчезала.

  61. Александр Шуйский
    18/04/2012 at 11:09 Постоянная ссылка Цитировать

    нужно между пятой и шестой строкой написать что-то типа

    if ($(this).scrollTop() == $('body').height() ) $('a#move_up').fadeOut();

    смысл проверки значения "сколько проехали сверху" и "высоты всего контента"

  62. спасибо, работает!!!

  63. Александр Шуйский
    20/04/2012 at 15:01 Постоянная ссылка Цитировать

    ю а велкам!=)

  64. Спасибо огромное, получилось! Давно хотел такое сделать на сайте!

  65. Александр Шуйский
    06/06/2012 at 9:07 Постоянная ссылка Цитировать

    Да не за что, собственно =)

  66. Спасибо огромное за пояснение скрипта :)

  67. Александр Шуйский
    29/06/2012 at 21:53 Постоянная ссылка Цитировать

    Незачто =)

  68. Спасибо, автор, за скрипт. Очень коротко и лаконично.

  69. Александр Шуйский
    30/06/2012 at 12:51 Постоянная ссылка Цитировать

    Всегда пожалуйста =)

  70. Спасибо автору. Большое спасибо.
    Многие умничают не обращай внимание, а то быстро состаришься !
    Спасибо за труд.

  71. Александр Шуйский
    27/07/2012 at 10:40 Постоянная ссылка Цитировать

    Большое спасибо за приятный отзыв :) Будем стараться!

  72. Владимир
    27/09/2012 at 11:49 Постоянная ссылка Цитировать

    Алексей. Подскажите пожалуйста! как поменять иконку кнопки наверх? все класно работает ,но как топором рубленная)

  73. Александр Шуйский
    27/09/2012 at 11:57 Постоянная ссылка Цитировать

    Здравствуйте, Владислав. Конечно же подскажу! Менять через css, id move_up =)

  74. Спасибо, отлично получилось, сделал на сайте gbutler.ru, только добавил изображение вверх, через html сущность ▲

  75. Александр Шуйский
    10/10/2012 at 10:33 Постоянная ссылка Цитировать

    Так держать!=)

  76. Станислав
    18/01/2013 at 6:47 Постоянная ссылка Цитировать

    Спасибо большое! Лучше не придумаешь. Супер!!! Только вот не удобно что у Вас на сайте комментарии сделаны снизу остальных. Это сейчас их не много, а если 1000? или больше?

  77. Александр Шуйский
    18/01/2013 at 10:24 Постоянная ссылка Цитировать

    Пожалуйста!
    Ну, тогда вопрос решается постраничной навигацией, но пока она не нужна =)

  78. Виталий
    09/02/2013 at 11:59 Постоянная ссылка Цитировать

    Большое спасибо! Очень помогло! То, что нужно! И работает в IE.

  79. Александр Шуйский
    09/02/2013 at 12:45 Постоянная ссылка Цитировать

    Спасибо, рад был быть полезным :)

  80. Жаль что в низ сайта этот код прописать нельзя.

  81. Денис Акулов
    26/09/2013 at 20:00 Постоянная ссылка Цитировать

    Добрый день.
    Замечательная кнопка. Правда, сейчас ломаю голову, как сделать так, что бы она ехала не к определённой точке на экране, а к якорной ссылке. На странице имеются несколько “спойлеров” – контент, “раскрывающийся” при клике на кнопку (я верю, что вы знаете – просто хочу подать объяснение наиболее полно) и, соответственно, меняющий длинну страницы и “сбивающий прицел”. Это делается как то “легко и просто” или это уже совсем другая история?
    Задача, которая передо мной стояла уже решена сильно другим способом, но меня заело.

  82. Александр Шуйский
    26/09/2013 at 20:45 Постоянная ссылка Цитировать

    Здравствуйте!
    Насколько понимаю, вам просто нужно скроллить до элемента с указанным нужным айди, а пример этого перед описанием кнопки наверх. Или я не прав?

  83. Спасибо за понятное объяснение!
    Давно искал, что-то подобное!

    Код работает и я поставил его себе на сайт

    НО почему-то скрипт работает у меня не на всех страницах – я уже голову себе сломал, не могу понять причину.
    Может поможете? Подскажите?

    вот куда ставил
    ribdozor.ru/ (тут работает)
    ribdozor.ru/o-ribalke/statti.html (тут не работает – хотя всё повторил в точности)

    помогите разобраться!!!

    PS Извините за ссылки -))

  84. НО почему-то скрипт работает у меня не на всех страницах – я уже голову себе сломал, не могу понять причину.
    Может поможете? Подскажите?
    вот куда ставил
    ribdozor.ru/ (тут работает)
    ribdozor.ru/o-ribalke/statti.html (тут не работает – хотя всё повторил в точности)

    Оба адреса работают.
    Проверил в Firefox 25.0 и Chrome 30.0.1599.114

  85. Сергей
    09/11/2013 at 20:40 Постоянная ссылка Цитировать

    Да спасибо -))
    конечно уже работает, потому что я всё исправил -))

Добро пожаловать, коллега! Вы можете оставить свой отзыв:





Допустимые XHTML-теги:

<a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>

Подписка на комментарии