четверг, 13 февраля 2020 г.

Кнопка "Вверх" для плавного перехода вверх страницы сайта

В сегодняшней статье расскажу как сделать кнопку "Вверх" для плавного перехода вверх страницы на блоге.

На моем основном сайте эта кнопка уже была вставлена в шаблон, по этому я раньше и не парился ))

Но вот при создании нового блога ее, не обнаружил, поэтому пришлось чуть побродить по просторам интернета в поисках нужного кода. В сети нашел массу вариантов, но очень много из них были слишком заморочены. Я же выбрал самый простой, и в этой статье решил поделится им с Вами, моими читателями.

И так, снизу представлен код который вы можете скопировать... Что делать с ним дальше, расскажу чуть ниже.





Заходим в панель управления Дизайн , выбираем Добавить гаджет (в любом месте, я добавил в самом низу, в подвале сайта, что бы не мешался) далее выбираем HTML/JavaScript. И вставляем туда ранее скопированный код.




Теперь дело осталось за малым, вставить стрелочку или другую картинку, какая вам по душе.
Для вставки картинку нужно залить на какой то бесплатный хостинг, ну или взять одну из моих стрелочек ЗДЕСЬ, или найти картинку в интернете и скопировать ссылку на нее (но это чревато тем, что если хозяин картинки ее удалит из сети, она пропадет и у вас, по этому выбираем первый вариант).

Теперь заменяем текст в коде "Ваша стрелка" на ссылку на вашу картинку. и вуаля )

В коде можно сделать пару изменений right:20px; если изменить число поменяется расположение стрелки относительно правого края, и параметр title="Вверх" - отображаемый текст при наведении на картинку.

Пример стрелочки вверх можно посмотреть на моем тестовом сайте по ссылке  Пример стрелки Вверх