Стрелочка прокрутки вверх.
Вы наверное часто встречали в блогах достаточно
удобные гаджеты – стрелочка прокрутки вверх. Иногда бывает и стрелочка
прокрутки вниз. Это достаточно удобно для пользователей, потому что они могут
помнить, что какая – то нужная им информация может находиться внизу страницы.
Эта функция избавляет пользователей от нудного прокручивания колесика вниз
блога. Особенно стрелочка прокрутки блога вверх полезна при больших и длинных
страницах блога, когда меню располагается, только в верхней части.
Здесь я расскажу, как поставить на ваш блог
стрелочку прокрутки вверх.
Сделать это просто. Достаточно иметь саму картинку стрелочки вверх. Как самому сделать такую картинку я рассказал здесь. Итак, вы берете понравившуюся вам картинку, точнее ссылку на нее и вставляете в этот код:
Сделать это просто. Достаточно иметь саму картинку стрелочки вверх. Как самому сделать такую картинку я рассказал здесь. Итак, вы берете понравившуюся вам картинку, точнее ссылку на нее и вставляете в этот код:
<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
Подключаете библиотеку jQuery к блогу -> в head блога ссылку на СDN -<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
Далее - просто добавить такой код в виде гаджета.
<div id="upbutton"></div>
<script>
$(window).scroll(function() {
if ($(this).scrollTop() > 100) {
if ($('#upbutton').is(':hidden')) {
$('#upbutton').css({opacity : 1}).fadeIn('slow');
}
} else { $('#upbutton').stop(true, false).fadeOut('fast'); }
});
$('#upbutton').click(function() {
$('html, body').stop().animate({scrollTop : 0}, 300);
});
</script>
<style>
#upbutton {
background: url("Здесь URL вашей картинки
") no-repeat top left;
height: 60px;
width: 60px;
bottom: 30px;
right: 30px;
cursor: pointer;
display: none;
position: fixed;
z-index: 999;
}
<style>
Посмотреть готовый пример можно здесь - CodePen
Единственное радикальное отличие от кода в начале поста, это то, что кнопка прокрутки показывается, только после начала скроллинга.
Не все адреса ссылок рабочие. Проверяйте! Лучше брать адрес ссылки просто правой кнопкой мышки (копировать ссылку на изображение) или разметить у себя на сайте, блоге - это более надежный вариант!
https://sites.google.com/site/youmorestop/home/s12.png
https://sites.google.com/site/youmorestop/home/arrow.png
Да, и чуть не забыл..Для того чтобы ставить гифку с бабочкой в самом начале поста, нужно поставить на место ссылки вот этот код:
Да, и чуть не забыл..Для того чтобы ставить гифку с бабочкой в самом начале поста, нужно поставить на место ссылки вот этот код:
https://975c0837-a-62cb3a1a-s-sites.googlegroups.com/site/youmorestop/home/vverkh.gif?attachauth=ANoY7crrTjmt33MtpB7VgLpK3IWvGnDgfAS-nIa0B4jJQDIKxVkQxSdW7l54fIJSsUvxbDt9sWKtm-ewmQ9HmLIdER-QuKKHkxo91ATlECWsByvuS0doHBW3Umz8-0EvayCskmU6epqUi7tdcr2N9ZyO44J04ZuLnjktDIsOug5dYNqlfB1JWjhkd6uGscQXy0cASjItBTyTnlrY5HZN4pvAnDJH9WCEIg%3D%3D&attredirects=0
Спасибо! Все понятно написано. Поставила себе кнопочку.
ОтветитьУдалить