Кнопка Вверх - как установить кнопку Вверх для блога

Если на блоге большая статья, то, дочитав до конца, нужно скролить вверх или тянуть за ползунок, чтобы вернуться к началу страницы и меню. Это не очень удобно. Удобней было бы просто нажать на кнопку прокрутки вверх, чтобы страница сама медленно поднялась.

Я часто вижу кнопку «подняться вверх» на сайтах, иногда вместо кнопок бывают стрелки и еще какие-либо картинки, даже анимированные – то бабочка, то ракета.

Я решила тоже себе такую фишку поставить. Поискала, как сделать кнопку «вверх». Оказывается, на Blogger это очень просто. Надо поставить специальный скрипт в гаджет, а в скрипте поставить ссылку (URL) на картинку, на которую надо будет нажимать, и все.

Больше всего у меня ушло времени на подбор подходящей кнопки-картинки. Так как самостоятельно ее делать не хотелось, надо было подобрать такую, чтобы подошла и по цвету, и по размеру. Я насобирала много различных кнопок на просторах интернета, чтобы выбрать одну-единственную.

Эти кнопки я решила выложить здесь на блоге – может, кому пригодится, чтобы не тратить время на поиски. Смотрите их ниже.

Итак, вот этот  скрипт кнопка вверх:

****************************************************************************

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

*****************************************************************************

Этот скрипт копируем в текстовый редактор, например, в блокнот, и вместо слов «Ваша ссылка на картинку» вставляем ссылку на выбранную картинку, или URL (от англ. Universal Resource Locator – универсальный указатель ресурса, или адрес картинки в сети).

Где взять этот URL понравившейся кнопки?

Есть несколько способов, я об этом расскажу далее.

Лучше, конечно, скачать понравившуюся картинку к себе на компьютер и затем поместить ее на свой ресурс:  это может быть google -фото (замена picasa), блог, или на свой хостинг и затем взять URL.

А сейчас для примера давайте возьмем URL какой-либо картинки прямо с этого блога ниже. Для этого нажмем на выбранную картинку правой кнопкой мыши, в выпадающем списке выберем «Копировать URL картинки» и вставим в скрипт вместо слов «Ваша ссылка на картинку». Код получается довольно длинный. 

Теперь копируем весь получившийся код и переходим в настройки блога Дизайн – Добавить гаджет – Добавить HTML/JavaScript. В открывшемся окне нажимаем <Ctrl+V> или «Вставить». Нажимаем «Сохранить», «Сохранить» расположение», «Просмотреть блог».

Теперь, если захотите поменять картинку кнопки «Вверх», просто войдите в гаджет и поменяйте URL картинки на другую. Все очень просто, но как удобно!
Я записала видеоролик, чтобы наглядно показать, как установить кнопку Вверх на свой блог.

Картинки для кнопки прокрутки вверх

********************************************************************************

********************************************************************************