Кнопка «Вверх» для сайта — простой и легкий скрипт на jQuery от Яндекса

Кнопка вверх для сайта Привет, друзья. Сегодня я продолжаю делиться с вами полезными скриптами, а если говорить конкретно, то я расскажу вам историю о появлении на моем блоге кнопки вверх. Меня уже давно просили написать, как сделать такую же кнопочку, но мне было жалко «палить контору», но сегодня я вдруг передумал…

Так-то ничего нового я не расскажу, ведь в сети можно найти еще 100500 статей о том, как сделать кнопку вверх для сайта, на этом бы и стоило закончить сегодняшний пост, если бы не одно НО! Моя кнопка необычная, не такая как у всех – у меня кнопка от самого Яндекса…сейчас-сейчас я все расскажу :)

Как-то изначально так сложилось, что при ведении блога я решил отказаться от постраничной разбивки комментариев к постам. Не знаю почему, может не хотел плодить лишних страниц, а может и не верил, что у меня может быть более 50 комментариев к одному посту, так или иначе, свое мнение я не изменил до сих пор – все комментарии к постам выводятся одной страницей. Однако, вот незадача, некоторые посты на моем блоге набрали уже более 500 комментариев, и это не смотря на то, что я раз в месяц их подчищаю. Короче, это была предыстория – а результат такой, что пришлось добавить на блог кнопку вверх. В результате навигация по длинным постам с комментариями значительно упростилась.

Кнопку или сам скрипт я даже не искал, все это само попалось мне на глаза – на одном из сервисов Яндекса, увы, не помню на каком. Но раздумывать я не стал – раз дают надо брать!

Мне очень нравится выражение «Хорошие художники копируют, а гениальные — воруют», но вот я хоть и не художник, но ворую гениально :) Да, кнопку, которую вы видите на моем блоге, я спер с Яндекса. Я не хотел пользоваться чьими-то инструкциями и скриптами, они все какие-то стремные, а тут раз уж сам Яндекс пользуется данным скриптом, значит он лучший.

NB: это не первая вещь, которую я «позаимствовал» у Яндекса, месяц назад я обнаружил на одной из промо-страниц «секретные» кнопки шаринга, о чем писал на форуме.

15 минут колупаний исходного кода и все исходники у меня! Но я вас избавлю от этого безобразия, с моей инструкцией вы сможете всего за 2 минуты заиметь красивую и работающую кнопочку!

Установка кнопки «вверх» на любой сайт

Действительно, добавить данный скрипт можно без проблем на любой сайт или любую CMS, да что там – хоть на чистый html хоумпейдж. Самое главное и единственное условие – у вас должна быть подключена jQuery библиотека.

Оригиналов исходного кода Яндекса я не сохранил, так как при добавлении на блог я сразу менял некоторые стили и настройки. Но поверьте, в процессе интеграции все стало только лучше!
Итак, приступим к установке:

Шаг 1. Добавляем JavaScript в шаблон сайта, перед закрывающим тегом </head>

<script type="text/javascript">$(document).ready(function(){
$(window).scroll(function () {if ($(this).scrollTop() > 0) {$('#scroller').fadeIn();} else {$('#scroller').fadeOut();}});
$('#scroller').click(function () {$('body,html').animate({scrollTop: 0}, 400); return false;});
});</script>

Например, для WordPress надо будет редактировать файл шаблона header.php, а в DLE необходимо будет добавлять код в шаблон main.tpl.

Шаг 2. Добавляем html-код в шаблон сайта перед закрывающим тегом </body>

<div id="scroller" class="b-top" style="display: none;"><span class="b-top-but">наверх</span></div>

Опять же, в WordPres надо редактировать файл footer.php, а для DLE снова main.tpl.

Умные и знающие люди (Паша ПафНутиЙ и Дима Dimox) советуют избавиться от этого шага, так как это не jQuery, а чтобы все было «по понятиям» надо поступить так, как описано в комментарии #comment-13676.

Шаг 3. Добавляем CSS-стили блока и кнопки вверх в файл style.css (название файла style.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(http://alaev.info/wp-content/plugins/goupbutt/b-j-top.png) no-repeat 50% 11px;border-radius:7px;}

Как видите, я даже url фоновой картинки со стрелкой не стал менять, оставил подгрузку с яндексовских серверов. На Яндексе пропала картинка, указал путь к картинке на своем сервере, а вам рекомендую ее сохранить к себе, будет надежнее.

Что тут можно настроить и изменить под себя:

  • bottom:90px; – смещение блока с кнопкой относительно низа страницы;
  • width:34%;margin-left:50%; — вот с этими параметрами вам придется поколдовать, т.к. четкой инструкции тут быть не может. Данные значения я выявил экспериментально, проверяя положение кнопки на разных разрешениях экрана именно для моего шаблона на блоге. Чего и вам рекомендую;
  • padding:32px 12px 4px; — с помощью этих значений вы можете регулировать размер блока с кнопкой, управляя отступами относительно надписи «вверх». 32px – отступ сверху, 12px – отступы слева и справа, 4px – отступ снизу;
  • color:white; — цвет надписи «вверх»;
  • border-radius:7px; — это css3 стиль, отвечающий за закругление краев блока.

Все готово, надеюсь, ничего не забыл. Безумно просто и настолько же полезно для сайтов с очень длинными страницами.

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

С уважением, Александр Алаев
 
Ерунда и баянЪ!Зачет! Плюсую!
+42
 
Оптимизация сайта

Профессиональный технический аудит и оптимизация вашего сайта.
Тот самый необходимый «фундамент» для успешного продвижения.

от 10 000 руб.
Продвижение сайта

Комплексный подход к решению поставленных задач, будь то достижение заветных позиций в ТОП 10 или увеличение трафика на сайт. В стоимость уже включены полный технический аудит и оптимизация сайта.

от 15 000 руб.
Консультация

У вас недостаточно знаний?
Нужен ответ на ряд вопросов?
Хотите узнать мнение эксперта?
Вы задаете вопрос — я на него отвечаю!

1 500 руб./час
 
Получай новости блога АлаичЪ'а на e-mail:
 
Другие посты из категории CMS & Кодинг:
Что нового на форуме:
  1. ПафНутиЙ (123 комм.)

    Саша, возможно ты будешь разочарован, но конструкция вида:

    $('#scroller').click (function () {$('body,html').animate ({scrollTop: 0}, 400); return false;});

    настолько давно ходит по сети, что на огромном кол-ве сайтов имеется именно она)

    конструкция же с автопоказом/скрытием имеется на чуть меньшем кол-ве сайтов)

    Просто ты не искал целенаправленно эту фишку.

    >>Как видите, я даже url фоновой картинки со стрелкой не стал менять, оставил подгрузку с яндексовских серверов.

    Вот так бы я не стал поступать, надёжнее всё-таки грузить со своего сайта, яндекс тоже иногда падает.

    Разок была история со скриптом с моего сайта, который юзали на другом, тупо подключив его к себе на сайт по ссылке с моего (экономит же ресурсы, да и грузится быстрее) да и проще, разбираться не нужно, в итоге у него в скрипте появилась что-то типа такой конструкции:

    $('a:even').attr ({

    href: 'http://другой_сайт/',

    target: '_blank'

    });

    $('a:odd').click (function () {

    alert ('Зачем юзать чужие скрипты????');

    return false;

    });

    А ведь могло быть всё гораздо хуже )))

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

    Ответить
    • АлаичЪ

      Паш, я ни в коем случае не претендую на первоисточник или что-то такое, я даже честно признаюсь, что код я спер у Яндекса :) Смысл поста в том, что раз какой-то скрипт используется Яндексом, то этот скрипт уж точно не бажный и неплохо оптимизированный.

      Ответить
      • Александр (9 комм.)

        Действительно, старо как мир. Года так с 2009 года скрипт по сети гуляет. У Яндекса вся прелесть кнопки — в расцветке )) Скопировал именно ее себе.

        Ответить
  2. SeoZwer (1 комм.)

    А Яндекс не накажет)?

    Ответить
  3. Dimox (19 комм.)

    Здесь есть один важный момент, на который стоит обратить внимание. Поскольку конструкция:

    <div id="scroller" class="b-top" style="display: none;"><span class="b-top-but">наверх</span></div>

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

    $('body').append ('<div id="scroller" class="b-top" style="display: none;"><span class="b-top-but">наверх</span></div>');

    Ответить
    • АлаичЪ

      То есть можно обойтись без второго шага инструкции, а добавить в первом шаге к существующему скрипту еще тот, который привел ты? Верно?

      Ответить
      • ПафНутиЙ (123 комм.)

        Да, так и есть)

        >>Смысл поста в том, что раз какой-то скрипт используется Яндексом, то этот скрипт уж точно не бажный и неплохо оптимизированный.

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

        Ответить
        • АлаичЪ

          Ну окей, спасибо, Паша и Дима, сейчас сделаю пометку в посте про альтернативный вариант.

          Ваши советы мне всегда полезны, я еще не такой качёк в html+css+js как вы :)

          Ответить
      • Dimox (19 комм.)

        Да, все верно.

        Ответить
    • doragon (5 комм.)

      Нормальные люди с помощью jQuery не создают inline-код. Делается обыкновенный якорь. В случае, если jQuery не успевает проинициализироваться до клика по кнопке, произойдет обычный переход по якорю. Ну, а насчет того, что код не несет смысла — тема для холивара, не хочется его разводить, но в таком случае нужно и от всякого рода лишних обвязок в коде избавляться, что присутствуют на 99,99% сайтов. Так что, имхо, нет смысла заниматься ахинеей с точки зрения написания кода.

      PS Добавлю, что тот же Яндекс не просто так использовал именной такой подход ибо лишний раз лезть в DOM — ни есть хорошо.

      Ответить
    • KingComp (6 комм.)

      Такая конструкция приводила к тому, что на планшете в браузере отображался текст $('').append ('').

      Ответить
  4. Роман (31 комм.)

    Как всегда что-то интересное :) Спасибо!

    Ответить
  5. Дмитрий (12 комм.)

    У меня возникла проблемка, кнопка появляется, а так же двигается все красиво. Вот только не работает нажатие по ней. Не возвращается страница наверх...

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

    Подскажите в чем может быть проблема. Что сделал не так.

    Сайтик вот filman.ru

    Ответить
  6. Роман (31 комм.)

    И хотелось бы уточнить если пропускать второй шаг, как точно прописывать первый шаг?

    Точнее куда именно и после чего вставлять $('body').append ('<div id="scroller" class="b-top" style="display: none;"><span class="b-top-but">наверх</span></div>');

    Ответить
    • Александр (34 комм.)

      Попробуйте вот так, не претендую на истину, но у меня работает))):

      <!-- Код кнопки наверх -->

      <script type="text/javascript">$(document).ready (function (){

      $(window).scroll (function () {if ($(this).scrollTop () > 0) {$('#scroller').fadeIn ();} else {$('#scroller').fadeOut ();}});

      $('body').append ('<div id="scroller" class="b-top" style="display: none;"><span class="b-top-but">наверх</span></div>');

      $('#scroller').click (function () {$('body,html').animate ({scrollTop: 0}, 400); return false;});

      });</script>

      <!-- END кнопки наверх -->

      Ответить
      • Роман (31 комм.)

        Александр, попробовал как вы сказали, тоже работает ))

        Жду мнение наших уважаемых экспертов ))

        Ответить
        • Александр (34 комм.)

          У меня что-то в IE не работает)))

          Ответить
          • Роман (31 комм.)

            На другом сайте пробовал все варианты, совсем мозг сломал, абсолютно ничего не получилось ((

            пришлось оставить старый вариант хоть и не знаю насколько он правильный

            <!-- //кнопка вверх-->

            <script>$(function (){$.fn.scrollToTop=function (){$(this).hide ().removeAttr ("href");if ($(window).scrollTop ()>="100"){$(this).fadeIn ("slow")}var scrollDiv=$(this);$(window).scroll (function (){if ($(window).scrollTop ()<="1000"){$(scrollDiv).fadeOut ("slow")}else{$(scrollDiv).fadeIn ("slow")}});$(this).click (function (){$("html, body").animate ({scrollTop:0},"slow")})}});

            $(function (){$("#toTo_button").scrollToTop ();});

            </script>

            <style>

            #toTo_button { width:55px;text-align:center;padding:5px;position:fixed;bottom:10px;right:12px;cursor:pointer;color:#666;text-decoration:none; }

            #ups a img { opacity:0.7; -moz-opacity:0.7; filter:alpha (opacity=70); }

            #ups a:hover img { opacity:1.0; -moz-opacity:1.0; filter:alpha (opacity=100); }

            </style>

            <div id="ups">

            <a href="/" id="toTo_button"><img src="http://блаблабла.ru/templates/бла/images/up.png" alt="Вверх страницы" /></a>

            Ответить
            • АлаичЪ

              Вариант, описанный в посте (три шага) работает замечательно во всех версиях IE даже в режиме совместимости.

              Ответить
      • Selenii (12 комм.)

        Поставил себе так и отлично работает...

        Ответить
  7. Дмитрий (1 комм.)

    Ни в какую не хочет отображаться на моем сайте. Сделал все правильно, даже не знаю в чем причина(((

    Ответить
    • Роман (31 комм.)

      Дмитрий, мистика это :)

      На один сайт кнопочка отлично сразу "стала", на второй никаким способом ну никак :)

      На тот сайт, где сразу, так сказать, "стал" модуль, пробовал всеми предложенными способами все работают.

      Ответить
  8. Aleee-Up (1 комм.)

    Кнопка хорошо смотрится.

    Последнее время заглядываюсь на кнопку установленную на кинопоиске. Она мне кажется интереснее. Привлекает её функциональность — не нужно целиться в определенную пикчу просто вправо мышку подвинул и клацнул не глядя. В сети гуляет оригинальный скрипт, но усложнен огромным кодом и всунутыми ссылками.

    Ответить
  9. Евгений (5 комм.)

    Проблема с кириллицей какая-то :) если писать по русски: "ВВЕРХ" то выдает иероглифы. Когда написал транслитом: "BBEPX" все окей. Куда смотреть?

    Ответить
    • АлаичЪ

      Пересохрани в другой кодировке, например. Обычно это является проблемой.

      Ответить
      • Евгений (5 комм.)

        Пересохранил в другой кодировке — все шрифты поплыли. Вернул обратно :)

        Ответить
  10. Александр (34 комм.)

    В правой колонке у вас кнопка наверх покруче будет)))

    Ответить
  11. Павел (1 комм.)

    если сайт не подключён к яндексу (любому из сервисов) то этот метод не пашет.

    Ответить
  12. Технолог (1 комм.)

    Абсолютно не углубляясь в споры крутых профи, хочу попросить одно:

    — Нам бы, засранцам, сделать кнопочку "Вверх", типа, как от Алаева (с плавной прокруткой), но и как от Пафнутия — с четкой привязкой на странице по CSS.

    А то получается — либо прыгает конем страница, либо кнопку жер найдешь.

    Это ж неуправляемая ситуация:

    width:34%;margin-left:50%; — вот с этими параметрами вам придется поколдовать, т.к. четкой инструкции тут быть не может. Данные значения я выявил экспериментально, проверяя положение кнопки на разных разрешениях экрана именно для моего шаблона на блоге.

    Процентные значения — это плохие значения.

    Зажмите "Ctr", сер и покрутите скролл, и увидите, куда Ваши кнопочки улетают.

    А все потому — что нет конкретной привязки в HTML и CSS/

    Ответить
    • АлаичЪ

      Проценты — зло, не могу не согласиться, но иногда прекрасно выручают. Почему бы не поколдовать с css и не найти идеальный для себя вариант значений?

      Зажми ctrl и прокрути колесо — у меня не блоге сразу две кнопки вверх, и ни одна из них никуда не улетает, остаются на своих законных местах.

      Ответить
  13. Дмитрий (4 комм.)

    Подскажите, пожалуйста, в чем может быть проблема. При наведении курсора на кнопку вверх, он никак не реагирует, даже курсор не становится в виде пальца.

    Ответить
    • АлаичЪ

      Учить css надо :) Обновил пост, заново сделай шаг номер 3.

      Ответить
  14. Sgy-x2 (1 комм.)

    Скажите пожалуйста, где регулировать сколько будет прокручено страницы до появления кнопки?

    Ответить
    • АлаичЪ

      Вот это условие отвечает за появление кнопки: $(this).scrollTop () > 0

      Соответственно, 0 заменить на другое значение, например, 1000.

      Ответить
  15. Виталий (4 комм.)

    Здравствуйте, можете посмотреть если не трудно? Все сделал как надо, а криво встает и всё. http://isminecrafting.ru

    Ответить
    • АлаичЪ

      Все нормально там.

      Ответить
    • fol (1 комм.)

      Привет, у меня вопрос не совсем по теме, АлаичЪ скажи как ты сделал такие прикольные комментарии??? Тоже хочу сделать для своего блога, это какой то плагин???

      Заранее спасибо.

      Ответить
      • АлаичЪ

        Какие "такие" комментарии? Обычные вордпрессовские, я ничего не менял и никаких плагинов не использовал.

        Ответить
  16. Юрий Йосифович (3 комм.)

    Скажите пожалуйста, а как разместить кнопку "ВВЕРХ" на блоге, который размещен на сервисе BLOGGER (вот к примеру на моем блоге http://blog.yosyfovych.te.ua — если не сложно, сбросьте на почту или ссылку на инструкцию (если возможно стандартными средствами, без копырсаний в исходных шаблонах).

    Спасибо большое за ответ!

    Ответить
    • АлаичЪ

      Я никогда не работал с blogger, но я уверен, что ничего сложного в этом нет — google вам в руки.

      Ответить
      • Юрий Йосифович (3 комм.)

        Просто сказано, гугл в руки... Искал — так и попал на Вашу публикацию... Ладно, спасибо что потратили свое время на ответ — продолжу поиски...

        Ответить
        • АлаичЪ

          В таком случае — поделитесь, пожалуйста, когда найдете решение. Другие читатели будут благодарны за такую информацию.

          Ответить
          • Юрий Йосифович (3 комм.)

            Конечно, дорогой АлаичЪ — как видите, я все же не покидаю надежды увидеть у Вас в блоге публикацию по решению подобной проблемы именно на blogger. В интернете нормальных решений пока найти не получилось — а те что есть — требуют за такую настройку 10-15WMZ — что сами понимаете не очень радует меня...

            Ответить
            • АлаичЪ

              Не знаю, пробовали ли эти:

              http://veraborok.blogspot.ru/2012/08/knopka-vverx-dlya-blogger.html

              http://new-school-blogger.blogspot.ru/2011/11/knopka-vverh-dlja-bloggerscroll-to-top.html

              http://new-school-blogger.blogspot.ru/2012/01/knopka-vverh-i-vniz-dlja-blogger.html

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

              Ответить
  17. Евгений (1 комм.)

    Спасибо за кнопочку, установил без проблем. Вопрос: а зачем подгружать картинку кнопки с другого сайта, пусть даже и с яндекса? Свою оставил у себя на сервере.

    Ответить
  18. Анатолий (1 комм.)

    Подскажите пожалуйста в каком месте (после какого тега) в файле style.css нужно прописать CSS-стили блока и кнопки "вверх". Я как человек далекий от ЦСС, не могу разобраться. Спасибо :)

    Ответить
  19. Mccats (6 комм.)

    Спасибо, что делитесь с нами- новичками. Пробовала использовать некоторые кнопочки и бегущие в том числе. Почему-то в разных браузерах не срабатывает. Особенно в новых версиях.

    Ответить
  20. Сергей (3 комм.)

    Отличная кнопка, самое главное проста в установке... Все забываю поставить такую на свой сайт (после смены шаблона) пора бы уже взяться за нее))))

    Ответить
  21. WOLF (1 комм.)

    Здравствуйте уважаемые посетители Блога. У меня такой вопрос: Если фон у сайта не подвижен то эта кнопка не работает? т.к. у вас фон не фиксирован, а у меня он как раз таки зафиксирован. Жду ваших идей.

    Заранее, Спасибо.

    Ответить
    • АлаичЪ

      Причем тут вообще фон? Это никак не связано.

      Ответить
  22. Artem (1 комм.)

    Думаю, что для обычного пользователя WordPress — плагины ставить гораздо проще и легче, но стоит позаморачиваться с кодом если Вы расчитываете на посещения сайта с мобильных устройств. Дело в том, что "мобильные" посетители заходят в основном с Ж/Д вокзалов, аэропортов, МакДональдсов и пр. то есть мест где есть инет по Wi-Fi. И как правило доступ очень медленный ввиду большого количества посетителей.

    Если Ваш сайт не загрузится у посетителя в течении 10-20 секунд, в 90% случаев он найдёт эту же информацию на другом, более быстром сайте.

    Делаем выводы.

    Ответить
    • АлаичЪ

      Ну куда уж проще-то, чем описано в посте? Даже тупой разберется, тем более я уже написал что и куда добавить надо. В конце концов, тут даже проще чем плагин установить — файлы на сервер загружать не надо.

      Ответить
  23. Сергей Нестеровский (1 комм.)

    Это интересно... щас и мы себе заделаем)))

    Ответить
  24. 533312 (11 комм.)

    ради 1й кнопки целесообразно библиотеку с размером в 80-90кб ставить? есть какой нить обрезанный вариант библиотеки для кнопки?

    Ответить
  25. александр (1 комм.)

    Алаичь прав, про установку кнопки все написано понятно. Честно говоря я сам искал информацию по установке кнопки. А тут случайно наткнулся на этот блог. Спасибо.

    Ответить
  26. Андрей (5 комм.)

    А как сделать такую кнопку наверх, как у вас С ЛЕВОЙ стороны? Очень интересное решение, особенно интересно, как она работает на "суженом" окне браузера! Если можете — киньте ссылку на статью! У меня похожая кнопка есть (как Вконтакте), только вот она не исчезает при сужении окна браузера или просмотре сайта на узком экране. Выходит, что кнопка закрывает часть контента...

    Ответить
  27. Наталья (2 комм.)

    Привет. Пробовала сделать и вашим, и вторым способом. Ничего не вышло. Кнопка просто не появилась? Можете подсказать, в чем мои косяки могут быть. Сделала точно по указаниям. Коды добавила в хидер перед тегом /head, в css стиль добавила в самый низ. Ничего не изменилось =(

    Ответить
    • 533312 (11 комм.)

      установи библиотеку jquery, заработает

      Ответить
      • Наталья (2 комм.)

        Эм... еще бы знать как это делать ...

        Ответить
  28. Дмитрий (2 комм.)

    Подскажите пожалуйста, все сделал пошагово, а кнопка даже не отражается...Спасибо

    Ответить
    • 533312 (11 комм.)

      в main.tpl перед </head> ставите такой код.

      <script type="text/javascript" src="http://jqueryjs.googlecode.com/files/jquery-1.3.min.js"></script>

      должно заработать.

      бибилиотеку можно скачать и залить к себе на сайт и ссылку указать уже внутреннюю, так быстрее и лучше.

      у меня так: <script type="text/javascript" src="/engine/ajax/jquery-1.3.min.js"></script>

      Ответить
      • Дмитрий (2 комм.)

        сделал, все равно не отражается...

        Ответить
        • 533312 (11 комм.)

          значит что-то не правильно делаете, у меня все прекрассно работает, если что моя аська 360799616, там подробнее обьясню

          Ответить
  29. Stl (3 комм.)

    А про кнопочку "наверх", которая слева, вы напишите как её поставить? Мне она больше понравилась :)

    Пробовал так вытащить, но на сайте она остается внизу и не хочет растягиваться...

    Руки кривые, что поделать.

    Ответить
  30. Дмитрий (2 комм.)

    А можно узнать как делают в футоре кнопку вверх. Чисто кликаешь на рисунок и все.

    Ответить
    • 533312 (11 комм.)

      Эту часть кода ставите после <body>: <a name="lift"></a>

      А эту туда где должна быть кнопка: <a href="#lift">Вверх</a>

      Ответить
  31. Андрей (1 комм.)

    Алаичъ и другие гуру, спасибо за кнопочку, давно хотел себе похожую, а теперь реализовал.

    Только один вопрос. Я не программист и дизайн мне делал фрилансер.

    Вопрос: хочу, чтобы фон кнопки был как блоки в сайдбаре (по цвету). Где мне найти код их цвета?

    Если что, блог projectorman.ru

    Ответить
    • АлаичЪ

      В классе .b-top-but за фон отвечает запись background:#D8D5C2 — вот как раз #D8D5C2 — это цвет, его и надо менять (в твоем случае надо заменить на #CCC).

      Ответить
      • Андрей (1 комм.)

        АлаичЪ, спасибо. Сделал — красота! :)

        Ответить
  32. Max (1 комм.)

    Круто, особенно если присмотреться к коду :)

    http://alaev.info/wp-content/plugins/goupbutt/up_button.js?ver=1.0.0

    Ответить
    • АлаичЪ

      И что там такого особенного в коде можно увидеть?

      Ответить
  33. Андрей (1 комм.)

    Подскажите, установил все как написано. Кнопка появляется, все нормально, но она почему-то остается статичной, т.е. не хочет прокручиваться вместе со страницей вниз. В чем может быть проблема?

    Ответить
    • АлаичЪ

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

      Ответить
      • kaldan (1 комм.)

        Тоже установил, точно такая же проблема. Причем в фаерфоксе работает замечательно, а в IE статична. Хотя на вашм сайте кнопка в обоих браузерах работает. В чем может быть проблема?

        Ответить
  34. oleg (1 комм.)

    поставил кнопку но она моргает не подскажете в чем причина кроется

    Ответить
    • Марат (1 комм.)

      Используй последнюю версию jquery. Со старой версией такая беда происходит.

      Ответить
  35. Алик (2 комм.)

    Балллииин... :( Выполнил (несколько раз) все три простых шага...не работает! уже не знаю где искать причину. Установил последнюю версию Jquery. Несколько часов инет рыл, но так и не понял в чем косяк. Подскажите, люди добрые, как сделать грамотно?

    Всех благ!

    Ответить
    • АлаичЪ

      Посмотрел сайт — все работает нормально. Или нет?

      Ответить
      • Алик (2 комм.)

        Да не...работает плагин. Который пришлось установить за невозможностью интеграции желаемого scroll — a.

        Ответить
  36. KingComp (6 комм.)

    Спасибо большое за статью! Но нашел небольшой недочет (см. по ссылке. Обвел красной рамкой.), а именно в Chrome при прокрутке появляется черная полоска в определенной позиции.

    Скриншот:

    http://shot.qip.ru/00bOOz-23YtCRmyR/

    Ответить
    • АлаичЪ

      Это особенности Хрома и, может быть, jQuery. Можно обновить библиотеку jQ и проблема исчезнет. Но я считаю, что это ерунда, и всем пофиг на эту черточку :)

      Ответить
  37. Maks (3 комм.)

    Вставил код в магазине на prestashop, он сразу перестал открываться. Как это можно исправить?:)

    Ответить
    • KingComp (6 комм.)

      Всегда можете исправить через FTP. Открываете файл, который правили, и возвращаете исходное состояние.

      Ответить
      • Maks (3 комм.)

        Дак я спрашивал как заставить заработать кнопку возможную причину поломки сайта, а не как удалить скрипт через фтп в исходном коде)

        Ответить
  38. Slava (2 комм.)

    Доброго времени суток!! А подскажи как сделать такую кнопку как у тебя слева, чтобы появлялось поле при подведении курсора к кнопке) Уж больно она меня вдохновляет))

    Ответить
  39. Миша (3 комм.)

    невероятно, но в яндекс.браузере кнопка не работает! :-)

    зы: в FF и Опера всё отлично!

    Ответить
    • KingComp (6 комм.)

      У меня кнопка работала в Яндекс.Браузере.

      Ответить
      • Миша (3 комм.)

        у меня то-же заработала, но почему-то не сразу! :-)

        Ответить
  40. Миша (3 комм.)

    скажите пожалуйста, как сделать так, чтобы кнопка не показывалась при просмотре с планшетников, или не показывалась, если разрешение экрана меньше определённого количества пикселей по горизонтали (а то кнопка на рабочие участки текста залезает)?

    Ответить
  41. Алексей (1 комм.)

    Благодарю!

    Теперь и у меня есть кнопка вверх.

    Ответить
  42. Freqnsy (1 комм.)

    У меня кнопка стала моргать и не правильно отображается контент

    Ответить
  43. Александр (2 комм.)

    Уж проще плагин поставить...

    Ответить
  44. Николай (1 комм.)

    А как вам реализация вот этой кнопки http://mvcreative.ru/blog/knopka_naverkh/2013-02-02-34

    Ответить
    • KingComp (6 комм.)

      Отлично! Хотел такую кнопку как раз.

      Ответить
      • АлаичЪ

        У меня слева такая кнопка уже полгода висит — хорошая тема :) Я ее честно украл с КиноПоиска и переделал под себя.

        Ответить
  45. Дмитрий (1 комм.)

    Зачем искать в DOM-дереве элемент scroller 3 раза, когда можно внести его в переменную и для каких целей вы применяете функцию анимации для body и html. Оптимизировал и немного уменьшил этот говнокод. Юзайте на здоровье:

    $(document).ready(function(e) {
     
    	var scroller = $('#scroller')
     
    	$(window).scroll(function (){
    		$(this).scrollTop() > 0 ? scroller.fadeIn() : scroller.fadeOut();
    	});
     
    	scroller.click(function (){
    		$('html').animate({scrollTop: 0}, 400);
    		return false;
    	});
     
    });
    Ответить
    • АлаичЪ

      Спасибо за "оптимизацию". Зачем и почему так сделано — я понятия не имею, как и сказано в посте, код взят с Яндекса, а им я склонен верить и доверять.

      Ответить
    • Елисей (1 комм.)

      Кнопка перестает работать, а точнее она появляется, но не прокручивает страницу вверх. Просто кнопка.

      Ответить
  46. Steam68tmb@mail.ru (3 комм.)

    как сменит цветь картинки верх а то у меня в шаблоне бело_голубой фон

    Ответить
  47. Алексей (3 комм.)

    Спасибо, быстро и симпатично.

    Ответить
  48. Саша (1 комм.)

    Спасибо за статью. Ваш метод сработал на моем блоге в отличии от других...

    Ответить
  49. Рем-блог (1 комм.)

    Я видел кнопочку наверх в яндексе и в контакте, только вот не понимаю почему она слева на верху а не снизу справа в случае отсутствия мышки на ноутбуке пользовательт ведь пользуется прокруткой справа, кому эта кнопка может быть удобна слева вверху как в контакте?

    Ответить
    • KingComp (6 комм.)

      Мне. =)

      Вообще-то это целая всплывающая панель "Наверх". Даже на этой странице есть слева панель. Попасть по нему проще, чем по маленькой кнопке и скорее с масштабированием проблем меньше.

      Ответить
  50. Алексей (3 комм.)

    поставил кнопку на сайт по инструкции, спасибо, но недавно перестала отображаться стрелка. ни с того ни с сего. подскажите, как исправить?

    Ответить
    • Chapman (34 комм.)

      Видимо, по какой то причине картинка по адресу http://site.yandex.ru/static/css/blocks/b-j-top/b-j-top.png стала не доступна. Сохраните ее себе на сайт и смените адрес в стилях.

      Ответить
      • Алексей (3 комм.)

        Спасибо. Сохранил с этого сайта.

        Ответить
  51. Юрий (2 комм.)

    Что я только ни делал, разные варианты пробовал, так кнопка не отобразилась. Сайт на html, экспериментировал на одной странице http://santehnika-svoimirukami.ru/glossarii.php

    Ответить
    • Юрий (2 комм.)

      Наконец получилось, вынес из head в body и все заработало

      Ответить
  52. Артем (1 комм.)

    Здравствуйте, не получается вывести кнопку сделал и так как было написано изначально и код из футера вставил в скрипт, из комментария Dimox`а, так кнопка и не заработала

    Ответить
  53. Shtirlitz (3 комм.)

    Спасибо, долго копался, но потом заработало. Две поправки.

    Во-первых, с яндекса отдается какая-то чистая картинка в отличие от вашей: http://alaev.info/wp-content/plugins/goupbutt/b-j-top.png Вот ее я и скопировал себе. И только после написания коммента увидел, что чуть выше в комментах об этом уже сказали. Настоятельно рекомендую поправить статью.

    Во-вторых, код в футер нужно вставить не сразу в начале, а прям перед закрытием body, у меня тогда сразу все заработало

    Ответить
  54. Shtirlitz (3 комм.)

    Произошел конфлики этой кнопки с плагином на айквери (wp-recall). Пришлось пожертвовать кнопкой :(

    Ответить
  55. Валерий (58 комм.)

    Алаичъ, спасибо за подробный пост!

    Хотел поинтересоваться:

    не лучше ли вынести скрипт в шаге 1 в отдельный файл?

    Ответить
    • АлаичЪ

      Не лучше. А почему, собственно, вообще такой вопрос возник?

      Ответить
      • Валерий (58 комм.)

        Слышал советы, что скрипты и стили лучше выносить в отдельный файл.

        Поэтому и спросил.

        Ответить
        • АлаичЪ

          Безусловно оно так, но это не значит, что данная рекомендация должна быть применена везде. В данном случае скрипт не надо выносить в отдельный файл.

          Ответить
  56. Venvepsa (1 комм.)

    Если кому надо, то, с целью уменьшить кол-во обращений к серверу, картинку со стрелочкой можно зашифровать прямо в CSS.

    Вот код:

    background:#404751 url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACEAAAAQCAYAAACYwhZnAAAAxUlEQVR42mP8//8/A4VABYjvUGIAE4UOKALi21CafAAKCTJx+39U0E6uWeRoYgbimf+xg5lQeZo6gg2I1/3HD9ZB1dHEETxAvPc/cWAvVD1VHSEKxCf/kwZOQvVRxRFyQHzjP3ngBlQ/RY5QB+KH/ykDD6HmkOUIMyB++5864C3UPJIc4QTEn/9TF3yGmkuUI0KA+Od/2oCfUPPxOiINiP/8py34A7UHqyMq/tMXVKA7YsL/gQEgexkYgcQiYD0WyzBwYDEAm7rp89rw10UAAAAASUVORK5CYII=) no-repeat 50% 11px;border-radius:7px;}
    Ответить
    • АлаичЪ

      Спасибо, действительно, хороший вариант!

      Ответить
    • Максим (3 комм.)

      Venvepsa, спасибо! А то чет у меня "наверх" дублировалось и расплылось.

      Ответить
  57. Александр (1 комм.)

    На главной странице и в рубриках скрипт не работает, только на страницах со статьями работает. CMS WordPress. В чем может быть причина?

    Пробовал ставить совершенно левые скрипты кнопки Наверх и такая же проблема.

    Ответить
    • АлаичЪ

      Вероятнее всего, причина в том, что на тех страницах, где не работает, там не подключается библиотека jQuery. Как это определить, очень просто — просмотреть в исходном коде. Если вы не понимаете о чем идет речь — обратитесь к специалисту, который в этом сможет помочь.

      Ответить
  58. Сергей (1 комм.)

    Спасибо! Очень помогли! Для человека, ничего не понимающего в HTML это оказалось просто.

    Ответить
  59. anton (1 комм.)

    не работает в хроме. может библиотека старая?

    <script type="text/javascript" src="http://jqueryjs.googlecode.com/files/jquery-1.3.min.js">

    Ответить
  60. Михаил (1 комм.)

    А можно это как-то на библиотеке jquery 2.0 сделать?

    Ответить
  61. Илья (3 комм.)

    А как сделать, чтобы кнопка останавливалась за N от подвала?

    Ответить
    • Максим (3 комм.)

      bottom: 0px — подставь значение которое тебя устроит

      Ответить
  62. Максим (3 комм.)

    Так же можно скрипт ставить на в main.tpl а в любой подключенный javascript, установить в самом конце

    $(document).ready (function (){

    $(window).scroll (function () {if ($(this).scrollTop () > 0) {$('#scroller').fadeIn ();} else {$('#scroller').fadeOut ();}});

    $('#scroller').click (function () {$('body,html').animate ({scrollTop: 0}, 400); return false;});

    });

    Все отлично работает!

    Ответить
  63. Оля (1 комм.)

    Спасибо!! Я вставила Вашу кнопку на свои HTTP, и она работает. Смотрится тоже хорошо

    Ответить
  64. Иван (1 комм.)

    Поставил кнопку на сайте. Во-первых она удачно вписалась в дизайн (melitopol.pp.ua), во-вторых сразу получил несколько благодарностей от пользователей сайта. Я в свою очередь хочу поблагодарить автора статьи, за эту классную и простую в установке кнопку!

    Ответить
  65. Александр (1 комм.)

    Большое спасибо автору за классное решение

    Ответить
  66. Виталий (1 комм.)

    Спасибо большое, очень помогло. Заработало без проблем!

    Ответить
  67. Юрий (1 комм.)

    Подскажите пожалуйста, у меня сайт сделан в конструкторе Parralels, там менять коды html нет варианта, т.к. после публикации все изменения перезаписываются. Есть только вариант вставить готовый скрипт. Мне очень нужна такая кнопочка как на Вашем сайте, помогите, я новичек, многих нюансов, к сожалению не знаю. Может быть есть какой то готовый скрипт?

    Ответить
    • АлаичЪ

      Понятия не имею, это вам к разработчикам вашего скрипта надо обращаться.

      Ответить
  68. Вася (1 комм.)

    Здравствуйте!

    Поставил на свой сайт http://new-kinokrad.net/ все работает, только одна проблемка у меня получилась. Когда прокрутить страницу в низ или с низу вверх, кнопка несколько секунд мыгает, а в оперере не перестает мыгать. Что нужно сделать, чтобы она переставала сразу мыгать???

    Ответить
    • АлаичЪ

      Не знаю, это у вас конфликт скриптов какой-то случился.

      Ответить
  69. Ольга (1 комм.)

    Спасибо, все отлично работает! И пояснения помогли — сменила картинку, размеры, цвет фона без проблем.

    Ответить
  70. Алекс (1 комм.)

    Как на этот сайт правильно добавить кнопку "ВВЕРХ" ?

    Извиняюсь, за глупый вопрос. Но я поставил, все работало. Пришел на работу, включаю сайт, а кнопки нету...Пришлось временно ставить другую.

    Ответить
  71. леха (1 комм.)

    вот здесь классно сделали: http://www.promedall.com/

    Ответить
Оставь комментарий или спроси через Twitter →

· Малоинформативные комментарии или комментарии, не содержащие вопрос, удаляются.
· В поле URL оставляйте ссылку только на свой сайт/блог. Эта ссылка для админа, посетители ее не увидят.
· Любой html-код отображается в виде текста, любые ссылки неактивны.
· Для спаммеров - БЛОГ НЕ DOFOLLOW!!!