Кнопка наверх для сайта
При помощи кнопки Наверх мы возвращаемся к началу страницы.
Вы можете оформите ее обыкновенной ссылкой “Наверх”. Она имеет простой код
<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 – прокрутка страницы вверх более плавная, а кнопка – плавающая. Она появляется при прокрутки страницы вниз.
Вот небольшая подборка кнопок Наверх:
ничего не поняла:
"Не забудьте, что в записи эта кнопка стрелка вверх не работает, и вставлять код нужно непосредственно в виджет HTML / JavaScript."
а где найти виджет? и что это такое?
простите заранее если это глупый вопрос..
Если у Вас блог на блоггер, то кнопку вставлять надо через гаджет "HTML/Javascript"
Дополнила запись более подробными объяснениями. Упустила этот момент, потому что уже много раз объясняла это в своем блоге.
Спасибо, дельный материал. Нужно будет попробовать сделать кнопочку, думаю по детально изложенному материалу, проблем не должно быть.
Очень интересные идеи! Думаю, для читателей блогов эта кнопка будет полезной. (Сама же я для перемещения вверх сайта уже привыкла пользоваться клавишей Home на клавиатуре).
Спасибо! Поставила себе тоже, как у вас. У меня просьба, не расскажите ли как и где сделать, чтоб были 2 боковые панельки справа и слева. И если менять сейчас, не испорчу ли я выбранный дизайн?
RusaLena, у меня проблемы с блогом, снова не работает замена / правка шаблона в блоге. А без этого я не могу написать полноценный пост. Я так поняла, что вам нужна еще одна дополнительная колонка в блоге.
Спасибо, кнопочку поставила себе:)
Наташ, а мне нужна вторая страница в блоге. Я нашла вроде как ее вставить, но она у меня не отражается нигде. У себя в настройках я её вижу, а в блоге где все остальные люди — нет))?
Marilissa, создать страницу в blogger не сложно. Достаточно в админ. панели нажать на кнопку "создать страницу", написать ее заголовок и содержимое. Если при этом страница не добавилась (неотображается в блоге), то скорее всего дело в нестандартном шаблоне блога.
Mycrib, спасибо))), я вроде так и делала. А шаблон у меня уже стандартный, из блоггера. Может дело в том, что планируемая страница у меня пока пустая. Напишу пост и появится?..
Marilissa, странно… Даже пустая страница должна отображаться в блоге.
У меня тоже страница не отображается
O_Bulgakova, видимо очередной глюк Блоггера. У меня на всех блогах все нормально, о есть проблемы в другом — недоступен почему-то html-редактор, поэтому не возможно поменять что-либо в оформлении.
Шикарно получилось, спасибо за кнопочку.. У меня новая проблема выходит код ошибки при создании страницы в блоге, в чем может быть проблема кто нибудь сталкивался?
Асиля, многие жалуются, что страницы невозможно создать на blogger. Видимо, очередной глюк, остается ждать, когда пройдет.
Читаю и ничего не поняла, вы статью для себя писали?
LYUDMILA VITA, ну остальным-то понятно…
Спасибо всё работает:)
как в коде jQuery поменять картинку, а то я что-то не понял
Вместо слова "Наверх" в коде jQuery вставьте код стрелки наверх вида:
<img src="URL стрелки">
Очень полезная кнопочка! Спасибо!
А как можно сделать плавающую кнопку, чтоб она постоянно была внизу в углу экрана во время просмотра сообщения?
Антонина, для этого нужно вставить jQuery код, который предложен в сообщении (самый постедний код, который нужно вставить перед тегом </body>
Спасибо,все получилось,наконец-то нашла что искала
Елена, это очень хорошо 😉
Спасибо за кнопку. Не вижу смысла в плавных прокрутках, ведь для этого есть мышка, а мгновенно на верх, то что нужно. Кстати, не первый сайт, где написано "можете посмотреть у меня", а стрелочки нет?)
Олеся, кнопка была раньше, но я убрала ее.
Большое спасибо за урок ! Самый простой способ установить кнопку,получилось с первого раза. Спасибо!!!
Светлана, я очень рада, что мой урок был вам полезен.
Спасибо, сначала не получалось, потом все пошло.
Правда в коде пришлось поменять onclick на click. Даже другую картинку кнопки вставила…
И тогда все пошло! Ура! Еще раз спасибо!
Алла, хорошо, что все получилось
Большое спасибо за подсказку!!! Всё получилось сразу!!!
Вера, я очень рада))