Новое в блоге
Loading...
12 нояб. 2011 г.

Кнопка вверх (scroll to top) для Blogger

Привет дорогие читатели! Сегодня по многочисленным запросам в наших любимых поисковиках Google и Яндекс, хочу представить Вам "Кнопка на вверх" с CSS и JQuery. Плавный скроллинг для того,чтобы перейти к началу блога, когда вы находитесь в нижней части  страницы. Я покажу,как поставить такую кнопку на Ваш блог. Причем, она будет иметь несколько особенностей: во-первых, она будет появляться при прокрутке страницы вниз, а во-вторых, страница не будет прыгать вверх, как на многих сайтах, а плавно прокручиваться к началу. Не будем тянуть резину, а начнём действовать. Первый способ-смотреть с правой стороны демо. Если понравилось, тогда приступим.

  Ставим кнопку вверх (Плавный скроллинг) для Blogger(JQuery плагин scroll to top)


Идём - Шаблон - Изменить HTML с помощью Ctrl+F находим строчку </body> и прямо над ней вставляем этот код:

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



Код с прокруткой, надо копировать внимательно. Слово Вверх меняем на любое Ваше.

Автор: HARISH


 Второй способ: смотрим демо.

               Кнопка «Вверх» плавная прокрутка страницы на jQuery установка:

Заходим в Дизайн -Добавить гаджет-HTML/javascript
Копируем предоставленный код и вставляем в поле гаджета. Сохраняем.

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>
<script src='http://dl.dropbox.com/u/48089857/script'/></script>

Вот и всё. Спасибо за внимание. Желаю удачи.

Ух ты кнопочки! Понравилась статья? Поделитесь с друзьями:

4 коммент. :

  1. Респект Вам ребята за такие полезные советы и подсказки! Очень часто думал о подобной функции, но не надеялся, что это так доступно...Еще раз спасибо!

    ОтветитьУдалить
  2. Пожалуйста.Пользуйся на здоровье.

    ОтветитьУдалить
  3. Большое спасибо за простой рецепт установки кнопки.

    ОтветитьУдалить
  4. Пожалуйста!Действительно всё очень просто.

    ОтветитьУдалить

 
Footer