Кнопка наверх для сайта

стрелка вверх
При помощи кнопки Наверх мы возвращаемся к началу страницы.
Вы можете оформите ее обыкновенной ссылкой “Наверх”. Она имеет простой код
<a href="#">Наверх</a>

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

<a href=#top onclick="scrollTo(0,0); return false;">Наверх</a>

Ссылку наверх вы можете оформить кнопкой. Найдите стрелку и вставьте ее код следующим образом:

<a href=#top onclick="scrollTo(0,0); return false;"><img src=”URL стрелки”></a>

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

<a href=#top onclick="scrollTo(0,0); return false;"><img src="https://img-novosib.fotki.yandex.ru/get/4403/seth-an.f5/0_64a4d_bab09afc_XS" /></a>

Не забудьте, что в записи эта кнопка стрелка вверх не работает, и вставлять код нужно непосредственно в виджет HTML / JavaScript. Т.е. пройдите в Дизайн –> Элементы страницы. Здесб выберите “Добавить гаджет”. Появится окно:
гаджеты
Прокрутите его вниз и выберите гаджет “HTML / Javascript” из предложенного списка:
гаджет
Добавьте код кнопки в окно гаджета, название писать не нужно:
кнопка_наверх
Сохраните изменения и переместите гаджет в самый низ, под все гаджеты.
Используя следующий код кнопки Наверх, вы сможете добавить ее в справа или слева экрана. Для этого измените position – left (слева) или right (справа).

<a title="Back to TOP" style="position: fixed; left: 15px; bottom: 15px; outline: medium none; border: 0px none;" href="#"><img border="0" alt="Наверх" src="https://i.imgur.com/Ffb7p.png" /></a>

Вы можете сделать кнопку Наверх при помощи кода  jQuery . Вы видите такую кнопку в моем блоге.
Вставьте следующий код перед </body> в редакторе html своего блога.

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

В чем преимущество кнопки Наверх jQuery – прокрутка страницы вверх более плавная, а кнопка – плавающая. Она появляется при прокрутки страницы вниз.
Вот небольшая подборка кнопок Наверх:
0_64a4d_bab09afc_XLarrow_upfileopengo-upgo-up_5837upup1up1blueup2up3up5

Оцените статью
Добавить комментарий

  1. mirazh134

    ничего не поняла:
    "Не забудьте, что в записи эта кнопка стрелка вверх не работает, и вставлять код нужно непосредственно в виджет HTML / JavaScript."
    а где найти виджет? и что это такое?
    простите заранее если это глупый вопрос..

    Ответить
    1. Егор Балашов

      Если у Вас блог на блоггер, то кнопку вставлять надо через гаджет "HTML/Javascript"

      Ответить
  2. Аноним

    Дополнила запись более подробными объяснениями. Упустила этот момент, потому что уже много раз объясняла это в своем блоге.

    Ответить
  3. Дом своими руками

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

    Ответить
  4. Марина П.

    Очень интересные идеи! Думаю, для читателей блогов эта кнопка будет полезной. (Сама же я для перемещения вверх сайта уже привыкла пользоваться клавишей Home на клавиатуре).

    Ответить
  5. RusaLena

    Спасибо! Поставила себе тоже, как у вас. У меня просьба, не расскажите ли как и где сделать, чтоб были 2 боковые панельки справа и слева. И если менять сейчас, не испорчу ли я выбранный дизайн?

    Ответить
  6. Аноним

    RusaLena, у меня проблемы с блогом, снова не работает замена / правка шаблона в блоге. А без этого я не могу написать полноценный пост. Я так поняла, что вам нужна еще одна дополнительная колонка в блоге.

    Ответить
  7. Tata

    Спасибо, кнопочку поставила себе:)

    Ответить
  8. Marilissa

    Наташ, а мне нужна вторая страница в блоге. Я нашла вроде как ее вставить, но она у меня не отражается нигде. У себя в настройках я её вижу, а в блоге где все остальные люди - нет))?

    Ответить
  9. Аноним

    Marilissa, создать страницу в blogger не сложно. Достаточно в админ. панели нажать на кнопку "создать страницу", написать ее заголовок и содержимое. Если при этом страница не добавилась (неотображается в блоге), то скорее всего дело в нестандартном шаблоне блога.

    Ответить
  10. Marilissa

    Mycrib, спасибо))), я вроде так и делала. А шаблон у меня уже стандартный, из блоггера. Может дело в том, что планируемая страница у меня пока пустая. Напишу пост и появится?..

    Ответить
  11. Аноним

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

    Ответить
  12. O_Bulgakova

    У меня тоже страница не отображается

    Ответить
  13. Аноним

    O_Bulgakova, видимо очередной глюк Блоггера. У меня на всех блогах все нормально, о есть проблемы в другом - недоступен почему-то html-редактор, поэтому не возможно поменять что-либо в оформлении.

    Ответить
  14. Асиля

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

    Ответить
  15. Аноним

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

    Ответить
  16. LYUDMILA VITA

    Читаю и ничего не поняла, вы статью для себя писали?

    Ответить
  17. Аноним

    LYUDMILA VITA, ну остальным-то понятно...

    Ответить
  18. Necro Cannibal

    Спасибо всё работает:)

    Ответить
  19. Анонимный

    как в коде jQuery поменять картинку, а то я что-то не понял

    Ответить
  20. Аноним

    Вместо слова "Наверх" в коде jQuery вставьте код стрелки наверх вида:
    <img src="URL стрелки">

    Ответить
  21. Antonina Romanova

    Очень полезная кнопочка! Спасибо!

    Ответить
  22. Antonina Romanova

    А как можно сделать плавающую кнопку, чтоб она постоянно была внизу в углу экрана во время просмотра сообщения?

    Ответить
  23. Аноним

    Антонина, для этого нужно вставить jQuery код, который предложен в сообщении (самый постедний код, который нужно вставить перед тегом </body>

    Ответить
  24. елена яковлева

    Спасибо,все получилось,наконец-то нашла что искала

    Ответить
  25. Иванова Наталья

    Елена, это очень хорошо 😉

    Ответить
  26. Олеся Царёва

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

    Ответить
  27. Иванова Наталья

    Олеся, кнопка была раньше, но я убрала ее.

    Ответить
  28. Светлана

    Большое спасибо за урок ! Самый простой способ установить кнопку,получилось с первого раза. Спасибо!!!

    Ответить
  29. Иванова Наталья

    Светлана, я очень рада, что мой урок был вам полезен.

    Ответить
  30. Алла

    Спасибо, сначала не получалось, потом все пошло.
    Правда в коде пришлось поменять onclick на click. Даже другую картинку кнопки вставила...
    И тогда все пошло! Ура! Еще раз спасибо!

    Ответить
  31. Иванова Наталья

    Алла, хорошо, что все получилось

    Ответить
  32. Вера Хороших

    Большое спасибо за подсказку!!! Всё получилось сразу!!!

    Ответить
  33. Иванова Наталья

    Вера, я очень рада))

    Ответить