10 вариантов кнопка вверх для блога

кнопка прокрутки страницыВсем, доброго времени суток. Только сегодня обратила внимание, что этот пост выйдет по номером 100. Признаюсь, что не эту тему хотела поднять. Но если уж это юбилейный пост, пусть он будет таким, каким вы его видите. Хотя информации в сети, как установить кнопку вверх на блоге пруд пруди, я сделала свою подборку
этих стрелок. И дарю вам, мои дорогие читатели, 10 вариантов кнопочек на вкус и цвет.

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

1.Красная кнопка

http://s019.radikal.ru/i628/1408/ed/c46142277b4d.png
2.Зелёная кнопка
http://s020.radikal.ru/i708/1408/6b/e361972f8aee.png
3.Синяя кнопка
http://s017.radikal.ru/i421/1408/95/d8493e2236ec.png

4.Анимированная кнопка
http://s019.radikal.ru/i634/1408/2a/17c62fc3f6ad.gif

5.Кнопка в стиле котэ

набор кнопок вверх
http://s019.radikal.ru/i618/1401/11/dbacc5f6df13.png

6.Глянцевая кнопка.
http://s019.radikal.ru/i606/1408/8c/9fa5e8543103.png
7.Серая кнопка.
http://i038.radikal.ru/1408/4e/7ae19510ec96.png

8.Голубая глянцевая кнопка
http://s017.radikal.ru/i409/1408/8c/323e6b0f3dd3.png

9.Кнопка в стиле Web
http://s019.radikal.ru/i639/1408/8b/359f1a2aba66.png

10. Большая кнопка.

http://s019.radikal.ru/i622/1408/df/3d555e53c795.png

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

Код
<script type="text/javascript" > var smoothJumpUp = function() { if (document.body.scrollTop>0 || document.documentElement.scrollTop>0) { window.scrollBy(0,-50); setTimeout(smoothJumpUp, 20); } } </script> <div id="topcontrol" style="position: fixed; z-index: 100500; bottom: 5px; right: 5px; cursor: pointer; opacity: 1; " title="вернуться в начало"> <a href="javascript:smoothJumpUp()"> <img src="ваша ссылка"/> </a> </div>
Когда всё готово заходим в панель администратора-добавить гаджет-HTML/JavaScript и устанавливаем туда этот код. Переместите гаджет в самый низ страницы. Сохраните расположение и просмотрите результат.

Ещё вариант, появляющейся при прокрутке страницы кнопки на jQuery. Код устанавливаем так же в гаджет.

<style type="text/css"> #w2b-StoTop {-moz-border-radius: 5px;-webkit-border-radius: 5px;border-radius: 5px; width:100px;background-color: #EEEEEE;background-color: rgba(238, 238, 238, 0.6);filter: progid:DXImageTransform.Microsoft.gradient(startColorStr='#99EEEEEE',EndColorStr='#99EEEEEE');text-align:center;padding:5px;position:fixed;bottom:10px;right:10px;cursor:pointer;color:#444;text-decoration:none;border:1px solid #C9C9C9;} </style> <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.5.1/jquery.min.js"></script> <script type='text/javascript'> $(function() { $.fn.scrollToTop = function() { $(this).hide().removeAttr("href"); if ($(window).scrollTop() != "0") { $(this).fadeIn("slow") } var scrollDiv = $(this); $(window).scroll(function() { if ($(window).scrollTop() == "0") { $(scrollDiv).fadeOut("slow") } else { $(scrollDiv).fadeIn("slow") } }); $(this).click(function() { $("html, body").animate({ scrollTop: 0 }, "slow") }) } }); $(function() { $("#w2b-StoTop").scrollToTop(); }); </script> <a href='#' id='w2b-StoTop' style='display:none;'>Наверх </a>.

Посмотрите у меня на этом блоге.

Удачи всем нам.


Ой, а что это там ниже? Ну надо же! Нажимаем!

оформите подписку на новые шпаргалки

введите пожалуйста свой адрес электронной почты :

24 комментария:

  1. ПОЗДРАВЛЯЮ С 100 СТАТЬЕЙ, ЭТО ЗАМЕЧАТЕЛЬНАЯ И ВЕЛИКАЯ ЦИФРА! ОТ ВСЕЙ ДУШИ ЖЕЛАЮ ПРОЦВЕТАНИЯ И УСПЕХОВ ВАШЕМУ БЛОГУ!!!!

    А ЕЩЕ, БОЛЬШОЕ СПАСИБО ЗА ЭТУ ТЕМУ, Я ТАК ДАВНО ХОТЕЛА СДЕЛАТЬ КНОПОЧКУ, НО РУКИ НИ КАК НЕ ДО ХОДИЛИ))) ПРИКАРМАНИЛА СЕБЕ ВАШУ КИСКУ:)

    ОтветитьУдалить
  2. Вика, спасибо за такую полезную информацию! :) Мне уже пригодилась! :))
    Хорошего тебе дня! :)

    ОтветитьУдалить
  3. Девчонки это вам спасибо. Аня, с киской небольшая накладка. Переведи в PNG, лучше будет смотреться.

    ОтветитьУдалить
  4. Здравствуйте Вика. С удовольствием поздравляю Ваш блог с юбилеем! С удовольствием читаю Ваши шпаргалки, беру на заметку, использую. Спасибо Вам!

    ОтветитьУдалить
  5. Вика, привет! С первым юбилеем тебя и твой блог! Радывай))) нас своими шпаргалками по чаще!!!

    ОтветитьУдалить
  6. Людмила Геннадьевна, спасибо Вам за добрые слова.И за поздравления.

    ОтветитьУдалить
  7. Ирина, приятно принимать поздравления. Очень. Спасибо тебе и всем моим читателям. Огромное.

    ОтветитьУдалить
  8. Вика поздравляю тебя с 100! И спасибо за твой труд и вклад в блогостроении. Судя по количеству отзывов, твои статьи помогают блоггерам в оформлении и ведении блогов, а это самая благодарная награда. Так держать!

    ОтветитьУдалить
  9. Оля, спасибочки. Твоими бы устами... А ты бы не скромничала. Твоей работоспособностью остаётся только удивляться.

    ОтветитьУдалить
  10. Вика, спасибо! Кнопочку установила! Красота)))

    ОтветитьУдалить
  11. Танюшка Таня, Пожалуйста. Пользуйтесь.

    ОтветитьУдалить
  12. Кнопка с котом это просто luxury! она мне очень подойдет для нового сайта. Спасибо Вика! Поздравляю с первой сотней, желаю яркого развития твоих блогов и добрых, взаимных, любимых читателей!

    ОтветитьУдалить
  13. Аксинья. Спасибо за поздравления и пожелания. Удачи тебе тоже.

    ОтветитьУдалить
  14. Все норм, только открытая внешняя ссылка получается.
    Этот All-blogspot очень хитер :>

    ОтветитьУдалить
  15. Рамазан, но у меня и правда не открывается ваша карта. Вы какой код установили-тот что опубликовали у себя в блоге?

    ОтветитьУдалить
  16. Я тут имел ввиду кнопку вверх.
    А карта использую первый вариант.

    ОтветитьУдалить
  17. Я понял в чем проблема. Оказывается в браузере chrome не открывается. В яндексе все работает.

    ОтветитьУдалить
  18. Да, Рамазан. Я в хроме работаю. Тоже была такая мысль.

    ОтветитьУдалить
  19. Вика,здравствуйте!Большое спасибо!взяла у Вас киску,всё хорошо...но возможно ли эту кнопку разместить с левой стороны?

    ОтветитьУдалить
    Ответы
    1. Светлана, многим эта киса по душе пришлась. Чтобы сделать слева поменяйте в коде значение right: 5px; на left. Ну и с отступом 5px придётся поиграться. Возможно другое.

      Удалить
  20. А как сделать, чтобы кнопка была не всё время, а появлялась, только когда немного прокрутить страницу вниз (как у вас на блоге)? Спасибо.

    ОтветитьУдалить
  21. BlogAdmin, Поиграйтесь с этим параметром scrollTop>0), допустим так scrollTop() > 1000)

    ОтветитьУдалить
  22. Вика, изменил значение scrollTop>0) на scrollTop() > 1000) — не получилось, всё по-прежнему. Пробовал также менять scrollTop>0) на scrollTop>1000). Шаблон сохранять не забывал. :)

    ОтветитьУдалить
  23. BlogAdmin, тут нужен код на jQuery. Дописала пост, добавила ещё вариант. И ещё один есть в этом сообщении.
    http://www.shpargalochki.ru/2015/10/knopka-vverh-kak-v-VK-dlja-Blogger.html

    ОтветитьУдалить

Пользовательский поиск