2012-03-25

Как сделать кнопку Наверх

стрелка вверх
При помощи кнопки Наверх мы возвращаемся к началу страницы.
Вы можете оформите ее обыкновенной ссылкой “Наверх”. Она имеет простой код
<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="http://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="http://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 комментария :

mirazh134 комментирует...

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

Mycrib комментирует...

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

Дом своими руками комментирует...

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

Марина П. комментирует...

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

RusaLena комментирует...

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

Mycrib комментирует...

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

Tata комментирует...

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

Marilissa комментирует...

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

Mycrib комментирует...

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

Marilissa комментирует...

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

Mycrib комментирует...

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

O_Bulgakova комментирует...

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

Mycrib комментирует...

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

Асиля комментирует...

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

Mycrib комментирует...

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

LYUDMILA VITA комментирует...

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

Mycrib комментирует...

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

Necro Cannibal комментирует...

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

Анонимный комментирует...

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

Mycrib комментирует...

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

Antonina Romanova комментирует...

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

Antonina Romanova комментирует...

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

Mycrib комментирует...

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

елена яковлева комментирует...

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

Иванова Наталья комментирует...

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

Егор Балашов комментирует...

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

Олеся Царёва комментирует...

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

Иванова Наталья комментирует...

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

Светлана комментирует...

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

Иванова Наталья комментирует...

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

Алла комментирует...

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

Иванова Наталья комментирует...

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

Вера Хороших комментирует...

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

Иванова Наталья комментирует...

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

Отправить комментарий

Комментарии, содержащие ненормативную лексику, спам, оскорбления, публиковаться не будут. Ели вы хотите опубликовать код в комментарии, то воспользуйтесь encoder HTML
Публикуя комментарии, вы соглашаетесь с политикой конфиденциальности