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

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 раза), но я не стала.

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





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

8 комментариев:

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

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

      Удалить
  2. Вставлял все как вы описываете не видно кнопок?

    ОтветитьУдалить
  3. Спасибо!! Все получилось. До этого пыталась вставить кнопки по другим рекомендациям, - ничего не получалось, т.к. там много заморочек(( А Вы все доступно и, главное, просто советуете!

    ОтветитьУдалить
  4. Спасибо! Все работает. Потратила 2 минуты. Доступно, понятно, легко

    ОтветитьУдалить
  5. Кнопка не появилась.

    ОтветитьУдалить
  6. Спасибо, Мария, за хорошую идею и урок!
    Захотелось вдруг кнопочку наверх на блог вставить.
    И Ваш урок был первым в поисковой выдаче.
    А Вам и Вашему блогу я доверяю.
    Вставил код гаджета и теперь любуюсь и радуюсь
    очередной полезности и красивости на своём блоге!
    Спасибо Вам ещё раз!

    ОтветитьУдалить
  7. Кнопок нет! Ни по одному коду.

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

Kwork.ru - услуги фрилансеров от 500 руб.

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