Кнопка "Вверх" с плавной прокруткой

27.03.2017

 Про кнопки "Вверх" для Blogger я уже писала. Но поступил вопрос от читательницы блога - как вставить в блог кнопку "Вверх" с плавной прокруткой страницы. Два варианта, которые я нашла в Интернете, можете попробовать.  Второй - это сразу две кнопки "Вверх-вниз".
Оба варианта добавляются в блог как гаджет.



Кнопка "Вверх" с плавной прокруткой 

Вариант данной кнопки нашла у коллеги в блоге. Кнопка будет появляться при прокрутке страницы вниз. (Демо)


Кнопка "Вверх" с плавной прокруткой

Как добавить кнопку "Вверх":

1. Заходим в настройках блога в пункт Дизайн, затем нажимаем Добавить гаджет.




2. Выбираем гаджет HTML/JavaScript.



3. В поле Содержание вставляем скопированный код 
(Потяните за правый угол рамки с зажатой левой кнопкой мыши - затем скопируйте весь код):



(Если код не работает - можно взять здесь)

4. Гаджет сохраняем.

Само изображение кнопки можно заменить. Для этого в строке выделенную желтым цветом ссылку замените на свою ссылку на картинку:

controlHTML: '<img src="https://lh4.googleusercontent.com/-eV_K1uq_pdo/Tn4cpk-TF4I/AAAAAAAABo8/CHlsAWkdT6g/s800/1316886651_top.png" />'

(Картинку можно сначала загрузить в сообщение Blogger, затем скопировать ссылку на изображение).




Например, Вы можете взять такие кнопки из Интернета:


 



Кнопки "ВВЕРХ-ВНИЗ" с плавной прокруткой 
Кнопки "ВВЕРХ-ВНИЗ" с плавной прокруткой


Эти кнопки позволяют плавно перемещаться по странице блога не только вверх, но и вниз, что тоже иногда очень удобно. (Источник) - сейчас установлены в моём блоге.

Интересно, что при прокрутке страницы до самой верхней части будет исчезать кнопка "Вверх", при прокрутке до нижней части - кнопка "Вниз".
Обе кнопки будут видны при нахождении в "средней" части страницы блога.

На момент написания статьи я установила эти кнопки, т.к. они мне очень понравились.

Для добавления в блог таких кнопок выполните шаги 1, 2, 3 из первой части статьи (см. выше), только в шаге 3 вставляем это код:

<script type="text/javascript"> 
jQuery(function(){ 
$("#Go_Top").hide().removeAttr("href"); 
if ($(window).scrollTop()>="250") $("#Go_Top").fadeIn("slow") 
$(window).scroll(function(){ 
if ($(window).scrollTop()<="250") $("#Go_Top").fadeOut("slow") 
else $("#Go_Top").fadeIn("slow") 
}); 

$("#Go_Bottom").hide().removeAttr("href"); 
if ($(window).scrollTop()<=$(document).height()-"999") $("#Go_Bottom").fadeIn("slow") 
$(window).scroll(function(){ 
if ($(window).scrollTop()>=$(document).height()-"999") $("#Go_Bottom").fadeOut("slow") 
else $("#Go_Bottom").fadeIn("slow") 
}); 

$("#Go_Top").click(function(){ 
$("html, body").animate({scrollTop:0},"slow") 
}) 
$("#Go_Bottom").click(function(){ 
$("html, body").animate({scrollTop:$(document).height()},"slow") 
}) 
}); 
</script> 

<a style='position: fixed; bottom: 100px; right: 50px; cursor:pointer; display:none;' 
href='#' id='Go_Top'> 
<img src="http://zornet.ru/Aben/Gsa/ttop1.png" title="Вверх"> 
</a> 
<a style='position: fixed; bottom: 30px; right: 50px; cursor:pointer; display:none;' 
href='#' id='Go_Bottom'> 
<img src="http://zornet.ru/Aben/Gsa/ttop2.png" title="Вниз"> 
</a> 
<a style='position: fixed; bottom: 100px; right: 50px; cursor:pointer; display:none;' 
href='#' id='Go_Top'> 
<img src="http://zornet.ru/Aben/Gsa/ttop1.png" title="Вверх"> 
</a> 
<a style='position: fixed; bottom: 30px; right: 50px; cursor:pointer; display:none;' 
href='#' id='Go_Bottom'> 
<img src="http://zornet.ru/Aben/Gsa/ttop2.png" title="Вниз"> 
</a>

Затем также гаджет сохраняем.

Кнопки также можно заменить на свои (обратите внимание, что ссылку на каждую кнопку нужно вставить 2 раза), но я не стала.

Можете такие кнопки "Вверх-вниз" использовать:





Если найдете еще интересные варианты кнопок "Вверх" - поделитесь.

2 комментария:

  1. Мария, а где можно посмотреть, как эти кнопки работают? Я прошлась по вашим ссылкам, но кнопок этих не увидела.

    ОтветитьУдалить
    Ответы
    1. Для первой кнопки добавила ссылку на демо, вторые кнопки сейчас в этом блоге (Я сама блоггер) смотрите справа.

      Удалить

Загляните и на другие страницы ^