Добавить "Кнопка на вверх" с CSS и JQuery. Это кнопка для того, чтобы перейти к началу блога, когда вы находитесь в нижней части  страницы. Для ваших посетителей это очень удобно, если у вас длинные сообщения и на главной странице находится много постов. Я лично сам пользуюсь у себя в блоге. Есть два варианта, выбирайте на свой вкус.

Демонстрационный блог: Смотреть Демо. Посмотрите в нижней части страницы, в левом нижнем углу простая кнопка в виде ёлочки. Вы можете её перенести с левого угла в правый, нужно всего то заменить в коде left на right выделено красным. И так как обычно идём:
Шаблон - Изменить HTML с помощью Ctrl+F находим строчку </body> и прямо над ней вставляем этот код:


  <a title="Back to TOP" style="position: fixed; right: 15px; bottom: 15px; outline: medium none;
border: 0px none;" href="#"><img border="0" alt="Back to TOP" src="http://i.imgur.com/Ffb7p.png"></a>

Второй вариант:
Вот небольшой подарок для вас всех: ненавязчивый, легкий в установке JQuery scroll to top который добавляет кнопку с плавной прокруткой вверх страницы. Вот как это работает: если вы еще в верхней части страницы, то кнопка является невидимой и не появляется пока пользователь не начнет перемещаться вниз страницы.

Демонстрационный на Jquery кнопка:  Смотреть Демо. Перейти к нижней части страницы блога и посмотреть, что эта кнопка находится в правом углу. Этот вариант мне больше нравится, так как кнопка появляется только в тот момент когда посетитель переходит к нижней части странице и более плавно делает переход на вверх блога.  И так как обычно идём: Шаблон - Изменить 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;'>Scroll to Top</a>
Вы можете заменить Scroll to Top слово на своё. Например: вверх, на верх, в начало, к верху. Надеюсь я вам помог. Желаю удачи.


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


31 коммент. :

  1. Большое спасибо!

    ОтветитьУдалить
  2. Пожалуйста.Заходите ещё.

    ОтветитьУдалить
  3. Большое спасибо, давно искал эту чудо кнопку ))

    ОтветитьУдалить
  4. А картинку нельзя поменять ??

    ОтветитьУдалить
  5. Вот тут можно:http://new-school-blogger.blogspot.com/2011/12/knopka-vverhjquery-plagin-scroll-to-top.html

    ОтветитьУдалить
  6. классно. спасибочки

    ОтветитьУдалить
  7. Пожалуйста.Сам везде себе установил.На все блоги.

    ОтветитьУдалить
  8. Вот меня тоже интересует.

    ОтветитьУдалить
  9. Эту наверное нет.Я эксперементировал.

    ОтветитьУдалить
  10. ты лучший спасибо!)

    ОтветитьУдалить
  11. Поставила второй вариант. Очень большая благодарность вам полагается. Рыскала в сети и хотела именно такую кнопку. Работает, как швейцарский механизм. Вам цены нет.

    Вдохновляйтесь и радуйте читателей новыми возможностями.

    ОтветитьУдалить
  12. Да второй вариант у меня тоже во всех блогах стоит.Спасибо за похвалу,буду стараться.

    ОтветитьУдалить
  13. андрей коваленко29 июля 2012 г., 11:34

    Здравствуйте, мне всё понравилось, но панимаете есть такая штука мне нужно сделать скомбинированый виджет коментариев Vkontakte+Facebook вы бы не могли написать статью об этом .
    http://q-mozg.blogspot.it/,
    http://q-mozg.blogspot.com/

    ОтветитьУдалить
  14. Извините забыл ответить Вам.Можно попробовать,как только будет время.

    ОтветитьУдалить
  15. Спасибо, давно хотела такую кнопочку в свой блог

    ОтветитьУдалить
  16. спасибо ! вы супер и блог ваш такая неоценимая помощь нам - чайникам.

    ОтветитьУдалить
  17. Пожалуйста.Стараюсь,но это мой не главный блог.ВОТ ГЛАВНЫЙ:
    http://new-school-blogger.blogspot.com/

    ОтветитьУдалить
  18. какое слово в коде отвечает за плавный переход?

    ОтветитьУдалить
  19. А Вы попробуйте перевести код в gogle переводчик.

    ОтветитьУдалить
  20. андрей коваленко27 ноября 2012 г., 23:27

    Спасибо просто мне срочно надо но не могу добится успеха!

    ОтветитьУдалить
  21. Здравствуйте, очень понравился ваш блог! Особенно дизайн, если бы не адрес я бы не смог отличить ваш блог от сайта! И я хотел бы спросить, как вы вставили такой изумительный список страниц? Я пробовал, но неудачно(

    ОтветитьУдалить
    Ответы
    1. Привет!Спасибо.Какой список страниц? :-?Если можно поточней.

      Удалить
    2. Наверное он имел ввиду ВАШ меню страницы )

      Удалить
  22. Как сделать чтобы кнопка эта кнопка подсветилась при наведении?

    ОтветитьУдалить
  23. Отлично работает! Спасибо. Я и цвет текста поменял. В конце второй строчки значение #444 и значение #C9C9C9 поменял на более тёмные цвета. Получилось отлично, прямо под дизайн моего сайта.

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