Привет! Я запускаю обучающие онлайн курсы по SEO. Подробности и форма записи на Alaev.school
promopult
 

Кнопка «Вверх» для сайта — простой и легкий скрипт на 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 стиль, отвечающий за закругление краев блока.

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

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

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

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

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

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

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

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

2 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 комм.)

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

  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 стиль добавила в самый низ. Ничего не изменилось =(

  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).

  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 и Опера всё отлично!

  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 стала не доступна. Сохраните ее себе на сайт и смените адрес в стилях.

  51. Юрий (2 комм.)

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

  52. Артем (1 комм.)

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

  53. Shtirlitz (3 комм.)

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

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

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

  54. Shtirlitz (3 комм.)

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

  55. Валерий (63 комм.)

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

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

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

    • АлаичЪ

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

      • Валерий (63 комм.)

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

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

        • АлаичЪ

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

  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;}
  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 от подвала?

  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/

Оставь комментарий, Бро!

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