Кнопка плавного подъема страницы вверх

Что такое Кнопка плавного подъема страницы вверх? В большинстве случаев лента Блога или сама статья превышает видимость в окне браузера и приходится спускаться вниз, чтоб видеть окончание статьи.

Затем нужно подняться вверх, в начало Блога и тут никак не обойтись без кнопки плавного подъема страницы вверх. И сегодня я расскажу вам

Как установить кнопку плавного подъема страницы вверх


Если вы уже знаете как пользоваться админпанелью Blogger - вам будет просто это сделать. Не обязательно знать html в совершенстве, главное сделать все так, как я показываю на скринах и все у вас получится.

Как установить кнопку плавного подъема страницы вверх - пошаговая инструкция


Для установки кнопки нам понадобится скрипт, который мы будем внедрять в шаблон Html Блога

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


Далее далаем все по инструкции

Шаг 1 Кнопки плавного подъема страницы вверх


 

В админпанели Blogger идем в шаблон - Изменить html

Как установить кнопку плавного подъема страницы вверх

Шаг 2 Кнопки плавного подъема страницы вверх


 

Через поиск находим тег /body

Как установить кнопку плавного подъема страницы вверх

Шаг 3 Кнопки плавного подъема страницы вверх


 

Вставляем скрипт перед тегом /body

Как установить кнопку плавного подъема страницы вверх

Шаг 4 Кнопки плавного подъема страницы вверх


 

Сохраняем

Как установить кнопку плавного подъема страницы вверх

Шаг 5 Кнопки плавного подъема страницы вверх


 

Обновляем наш Блог, спускаемся вниз Блога и видим - Кнопка плавного подъема страницы вверх у нас в правом нижнем углу.

Как установить кнопку плавного подъема страницы вверх

 

Надпись в скрипте Кнопки плавного подъема страницы вверх "ПОДНЯТЬСЯ ВВЕРХ" можете заменить на любую свою.

Надеюсь вам поможет моя статья как установить кнопку плавного подъема страницы вверх и вы украсите ею свой Блог. Буду рада вашим комментариям.

Комментариев нет:

Отправить комментарий