Уголок блоггера. Кнопка "Вверх"

Всем привет!

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

Кнопка "Вверх" помогает пользователю, пролиставшему ваш блог до самого нижнего сообщения на странице одним щелчком вернуться наверх к меню. В принципе, это же действие можно произвести кнопкой "Home" на клавиатуре. Но не все читатели это знают, так что добавим немного удобства)

Для начала вам нужно нарисовать или найти на просторах интернета картинку для кнопки.

Я нарисовала стрелку вверх сначала от руки, а потом перерисовала в электронном виде.

Картинку нужно разместить в интернете. Так, как вы это делаете обычно с любыми картинками в своем блоге.

Далее открываем в меню пункт "Дизайн".

В нижней части добавляем гаджет HTML/JavaScript

Название гаджета оставляем пустым.

В Содержание вставляем следующий код:

<a href="#" id="PageUp"><img border="0" src="адрес вашей картинки для кнопки" /></a>
<script>
window.onscroll = function PageUp() {
document.getElementById('PageUp').style.display = (window.pageYOffset > '500' ? 'block' : 'none');
}
</script>
<style>
a#PageUp {
display: none;
position: fixed;
right:20px;
bottom: 20px;
transition: 1s;
}
</style>

Нажмите на кнопку "Сохранить", и все готово! Что получилось у меня, можете посмотреть в блоге)

А теперь давайте рассмотрим, что можно здесь изменить.

window.onscroll = function PageUp() {
  document.getElementById('PageUp').style.display = (window.pageYOffset > '500' ? 'block' : 'none');
}

Эта цифра показывает, как долго пользователь должен спускаться вниз, чтобы кнопка появилась. Например, если поставить 100, то кнопка появится почти сразу, пока читатель изучает самый верхний пост. А если поставить 1000, то читатель прокрутит гораздо больше, прежде чем появится кнопка.

right:20px;

Эта строчка означает, что кнопка находится у правого края экрана на расстоянии 20 пикселей от него. Замените слово "right" на "left", и кнопка будет у левого края. Величину отступа от края тоже можно менять по вашему вкусу.

bottom: 20px;

Эта строчка означает, что кнопка расположена у нижнего края экрана на высоте 20 пикселей от него. Эту величину вы тоже можете поменять по своему вкусу.

Вот и все)

Девочки. У кого уже есть такая кнопка, и вы хотите ее изменить, варианта два: либо вы удаляете существующую кнопку и устанавливаете новую по моему варианту, либо меняете существующий код. Если вы хотите мне задать вопрос по существующей кнопке, пожалуйста присылайте сразу использованный код на почту. По одной картинке я ничего подсказать не смогу)

Изначальный код взять здесь.