13 октября 2015

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

Всем привет!

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

Кнопка "Вверх" помогает пользователю, пролиставшему ваш блог до самого нижнего сообщения на странице одним щелчком вернуться наверх к меню. В принципе, это же действие можно произвести кнопкой "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 пикселей от него. Эту величину вы тоже можете поменять по своему вкусу.

Вот и все)

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

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

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

  1. Алена, спасибо! Всё получилось! Надо ещё подумать над внешним видом кнопки)))

    ОтветитьУдалить
    Ответы
    1. Да, вижу) Отлично!) Рада, что пригодилось)

      Удалить
  2. Ответы
    1. Светлана, пожалуйста! надеюсь, пригодится)

      Удалить
  3. О, как интересно! Не знаю, установлю ли у себя, но очень полезно. Алён, какая ты продвиииинутая...:))

    ОтветитьУдалить
    Ответы
    1. Наташ, в основном, моя продвинутость от вас, читателей))) Хочется, чтобы было красиво и полезно, вот и продвигаюсь)

      Удалить
  4. а вы пробовали эту кнопочку по IE >9 ?

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

Thank you for leaving comments :)