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

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

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

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