Кнопка «Наверх» для сайта за 5 минут
Думаю, что ни кому не надо объяснять для чего необходима кнопка «наверх», желательно с плавной прокруткой, на вашем сайте. Вам вероятно встречались такие сайты с «длинными» страницами и без этой самой кнопки «наверх». Согласитесь, такой вариант доставляет определенные неудобства.
Для установки кнопки «наверх» с плавной прокруткой, мы не будем подключать сторонние библиотеки, ограничимся одним JS-кодом, который отлично работает. Для его установки нам потребуется 5 минут.
И так, ставим кнопку «наверх» с плавной прокруткой к себе на сайт. Для этого нам необходимо выполнить следующие:
1. Скачать изображение с кнопкой. Как скачивать картинки, надеюсь уже знаете (кликнуть по картинке правой кнопкой мыши и выбрать «сохранить картинку как»).
2. Закинуть картинку в папку с изображениями своего сайта, обычно папка «images» .
3. Вставить код стилей перед закрывающимся тегом </head>, или в ваш файл CSS.
<style> #upbutton { background: url("images/up.png") no-repeat top left; height: 60px; width: 60px; bottom: 30px; right: 30px; cursor: pointer; display: none; position: fixed; z-index: 999; } </style>
4. Вставить следующий код перед закрывающимся тегом </body>. Или в файл footer.php если сайт работает на какой-то cms.
<script> var JumpUp = function() { if (document.body.scrollTop>0 || document.documentElement.scrollTop>0) { window.scrollBy(0,-50); setTimeout(JumpUp, 40); } } window.onscroll = function() { var scrolled = window.pageYOffset || document.documentElement.scrollTop; if (scrolled > 100) { document.getElementById('upbutton').style.display = 'block'; } else { document.getElementById('upbutton').style.display = 'none'; } } </script> <a id="upbutton" href="#" onclick="JumpUp(); return false;"> <img src="images/up.png" alt="Top" border="none" title="Наверх"> </a>
5. Проверить в двух местах, правильно ли вы прописали путь к изображению кнопки.
В коде стилей: background: url(«images/up.png») no-repeat top left;
И в ссылке: <img src=«images/up.png» alt=»Top» border=»none» title=»Наверх»>
Скорость прокрутки страницы регулируется здесь: setTimeout(JumpUp, 40);
Чем больше число, тем медленнее прокручивается.
Да, вы можете заменить изображение кнопки на любое другое, только поменяйте имя файла изображения в коде.
Вот и все. Ваша кнопка «наверх» установлена. Можете проверить ее в действии. Надеюсь, я расписал все подробно и понятно.
Не забыли украсить свой сайт к Новому году: здесь новогодние украшения для сайта
Всего комментариев: 0