Новая кнопка скроллинга вверх для сайта - блога.


Здравствуйте дорогие вебмастера и блоггеры. Есть для вас новые печеньки, в виде кнопки скроллинга страниц вверх для вашего сайта или блога. Не так давно, у нас уже была идентичная тема, о том, как установить на сайт - блог кнопку вверх, но кнопка вверх в той теме не обладает такими функциями, как сегодняшние две кнопки, вернее она одна, но с разными эффектами. В общем сейчас мы запостим два разных кода к одной и той же кнопке, вы же выберите себе тот код, функция которого понравится вам больше всего. Первый код делает скроллинг страницы вверх плавным, а второй код более быстрым и в конце происходит эффект ударения страницы и ее сотрясения. В общем прикольная штука. Прежде, чем ставить эту кнопку на свой сайт - блог удалите свои старые кнопки.
Так же добавим, что этот виджет может подойти и для других платформ не только для blogger.

Кнопка вверх для обычных тем blogger

Примечание! Данная кнопка не будет работать в новых темах blogger. Итак приступаем к установке нового виджета. Переходим в раздел Тема - Изменить HTML

 1). Здесь после тега <head> вставьте код:

<link href='https://maxcdn.bootstrapcdn.com/font-awesome/4.3.0/css/font-awesome.min.css' rel='stylesheet'/> <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js" type="text/javascript"/>

2). Ищем строку ]]></b:skin>  перед, которой вставляем этот CSS код:



/* Back to top */

#easy-top{background:rgba(0,0,0,.5);text-align:center;position:fixed;bottom:15px;right:15px;cursor:pointer;width:38px;height:38px;line-height:38px;border-radius:4px;padding:4px;display:none;-webkit-transform:translateZ(0);box-sizing:initial;transition:all .3s ease-out}#easy-top:hover{background:rgba(0,0,0,.9)}#easy-top:before,#easy-top:after{-webkit-backface-visibility:hidden;box-sizing:initial;}#easy-top:before{content:'';height:8px;width:8px;display:block;border:3px solid #fff;border-left-width:0;border-bottom-width:0;transform:rotate(-45deg);-webkit-transform:rotate(-45deg);-moz-transform:rotate(-45deg);-o-transform:rotate(-45deg);-ms-transform:rotate(-45deg);position:absolute;top:15px;left:18px}#easy-top:after{content:'';height:16px;width:3px;display:block;background:#fff;position:absolute;top:17px;left:22px}#easy-top:hover:after{border-color:transparent transparent rgba(0,0,0,.9)transparent}

3). Теперь приступаем к установке скрипта.

3.1). Первый вариант кнопки вверх с плавным завершением поднятия страницы. Найдите строку </body> и перед ней вставьте следующий код:

<div id='easy-top'/>

<script type='text/javascript'>

//<![CDATA[

$(function(){$(window).scroll(function(){$(this).scrollTop()>600?$("#easy-top").fadeIn(100):$("#easy-top").fadeOut(0)}),$("#easy-top").click(function(){$("html, body").animate({scrollTop:0},{duration:2e3,easing:"easeOutQuint"})})});

//]]>

</script>

<script src='https://cdn.rawgit.com/Arlina-Design/redvision/master/easing.js' type='text/javascript'/>
Сохраняете шаблон и проверяете работу нового виджета.

3.2). Теперь код для второй кнопки с эффектом ударения и отскока страницы сайта. Все в том же месте перед строкой </body> вставляете следующий код:


<div id='easy-top'/>

<script type='text/javascript'>

//<![CDATA[

$(function(){$(window).scroll(function(){$(this).scrollTop()>600?$("#easy-top").fadeIn(100):$("#easy-top").fadeOut(0)}),$("#easy-top").click(function(){$("html, body").animate({scrollTop:0},{duration:2e3,easing:"easeOutBounce"})})});

//]]>

</script>

<script src='https://cdn.rawgit.com/Arlina-Design/redvision/master/easing.js' type='text/javascript'/>

Сохраняем шаблон смотрим на работу второго варианта.

Кнопка вверх для новых тем blogger

1). Проделываем тоже самое, что указано в первом пункте по установке кнопки для обычных тем.

2). Ищем строку ]]></b:skin>  перед, которой вставляем этот CSS код:

.smoothscroll-top {
    position:fixed;
    opacity:0;
    visibility:hidden;
    overflow:hidden;
    text-align:center;
    z-index:99;
    background-color:#2ba6e1;
    color:#fff;
    width:47px;
    height:44px;
    line-height:44px;
    right:25px;
    bottom:-25px;
    padding-top:2px;
    border-radius:5px;
    transition:all 0.5s ease-in-out;
    transition-delay:0.2s;
}
.smoothscroll-top:hover {
    background-color:#3eb2ea;
    color:#fff;
    transition:all 0.2s ease-in-out;
    transition-delay:0s;
}
.smoothscroll-top.show {
    visibility:visible;
    cursor:pointer;
    opacity:1;
    bottom:25px;
}
.smoothscroll-top i.fa {
    line-height:inherit;
}



3). Теперь приступаем к установке скрипта. Находите код </body> и перед ним вставляете  следующий код:

3.1). Кнопка с обычным эффектом:
<div class="smoothscroll-top">
    <span class="scroll-top-inner">
        <i class="fa fa-2x fa-arrow-circle-up"></i>
    </span>
</div>
<script type='text/javascript'>
//<![CDATA[
$(function(){
 
    $(document).on( 'scroll', function(){
 
        if ($(window).scrollTop() > 100) {
            $('.smoothscroll-top').addClass('show');
        } else {
            $('.smoothscroll-top').removeClass('show');
        }
    });
 
    $('.smoothscroll-top').on('click', scrollToTop);
});
 
function scrollToTop() {
    verticalOffset = typeof(verticalOffset) != 'undefined' ? verticalOffset : 0;
    element = $('body');
    offset = element.offset();
    offsetTop = offset.top;
    $('html, body').animate({scrollTop: offsetTop}, 600, 'linear');
}
//]]>
</script>


3.2). Кнопка с эффектом ударения:
<div class="smoothscroll-top">
    <span class="scroll-top-inner">
        <i class="fa fa-2x fa-arrow-circle-up"></i>
    </span>
</div>
<script type='text/javascript'>
//<![CDATA[
$(function(){
 
    $(document).on( 'scroll', function(){
 
        if ($(window).scrollTop() > 100) {
            $('.smoothscroll-top').addClass('show');
        } else {
            $('.smoothscroll-top').removeClass('show');
        }
    });
 
    $('.smoothscroll-top').on('click', scrollToTop);
});
 
function scrollToTop() {
    verticalOffset = typeof(verticalOffset) != 'undefined' ? verticalOffset : 0;
    element = $('body');
    offset = element.offset();
    offsetTop = offset.top;
    $('html, body').animate({scrollTop: offsetTop}, 600, 'linear').animate({scrollTop:25},200).animate({scrollTop:0},150) .animate({scrollTop:0},50);
}
//]]>
</script>

Сохраните тему.


Поделиться

Facebook TwitterGoogle+ Vkontakte

Рекомендуем

Новая кнопка скроллинга вверх для сайта - блога.
4/ 5
Oleh

5 Коммент.

Оставить комментарий
avatar
Ольга Чикурова
ноября 13, 2016

Здравствуйте! Сделала все как написано, но кнопка первого варианта (простая) так и не появилась. Как понять в чем проблема?

Ответить
avatar
Шаблоны для Blogger
ноября 13, 2016

Здравствуйте.Скорее всего в шаблоне не подключены библиотеки скриптов Jquery. Вам нужно в шаблоне перед этой строкой </head> вставить код: <script src='//ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js'/>

Ответить
avatar
Никадор Ступин
декабря 03, 2016 Этот комментарий был удален автором.
avatar
Никадор Ступин
декабря 03, 2016

Здравствуйте, а можно стрелку слева сделать, т.к. справа нет места?

Ответить
avatar
Шаблоны для Blogger
декабря 03, 2016

Здравствуйте. Можно и слева сделать. В CSS найдите код: #easy-top в нем будет строка right:15px поменяйте слово right на left.

Ответить