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

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

<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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

Добавить комментарий

Ваш адрес email не будет опубликован. Обязательные поля помечены *