| Главная » Файлы » Полезные скрипты для Ucoz |
Кнопка и прокрутка страницы вверх через HTML и CSS
| 10.04.2016, 06:13 | |
| Тут все очень просто - реализуется такая кнопка по средствам, так называемого "якоря". Вверху страницы, в коде сразу после или в блоке с меню, в общем в том месте до которого нужно прокрутить страницу, устанавливаем следующую конструкцию: Код <div><a id='top'/></div> Где id - идентификатор ссылки. Теперь нужно разместить саму ссылку-кнопку при нажатии на которую будет происходить прокрутка страницы к якорю. Её конструкцию можно расположить в любом удобном месте, т.к. положение кнопки определяется через CSS. Код такой: Код <div><a href="#top" class="idTop">ВВЕРХ</a></div> А чтобы придать это конструкции вид кнопки добавим CSS, он будет примерно такой: Код a.idTop { position: fixed; /*позиционирование кнопки фиксированное*/ z-index: 9999; /*отображаем поверх всех элементов*/ bottom: 0%; /*положение снизу*/ right: 0%; /*положение справа*/ background: #7db9e8; /*фон, можно указать любую картинку*/ opacity: .6; /*прозрачность*/ color: #fff; /*цвет текста*/ padding: 10px; /*внутренние отступы*/ margin: 5px 15px 15px 5px; /*внешние отступы*/ } a.idTop:hover { opacity: 1; } Или можно использовать готовое изображение кнопки в виде стрелки вверх или еще чего, это уже кому как. Тогда код для кнопки будет таким: Код <div><a href="#top" class="idTop"><img src='.../myimage.png'/> </a></div> Минус такого подхода к реализации кнопки "Вверх" в том, что она будет видна, и вверху страницы тоже. Ну а плюсы что на неё не влияет включена ли поддержка JavaScript в браузере пользователя, для реализации такой кнопочки не нужно устанавливать ни плагинов, ни скриптов на сайт, которые поедают время и скорость его загрузки. Страница регистрации | |
|
| |
| | Комментарии: 1 | |
| Всего комментариев: 1 | |
|
| |
