Главная » Файлы » Полезные скрипты для 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 в браузере пользователя, для реализации такой кнопочки не нужно устанавливать ни плагинов, ни скриптов на сайт, которые поедают время и скорость его загрузки.



Страница регистрации

Категория: Полезные скрипты для Ucoz | Добавил: Galina
| Комментарии: 1
Всего комментариев: 1
avatar