Кнопка "Наверх на сайте"

Опубликовано:
Просмотров: 1869
+5
Голосов: 5

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

Итак для этого надо после открытия боди в темплате, проставить вот такую строку

<a name="Начало"></a>

Затем внизу например в окончании контента проставьте во такую строку

<center><a id="on_top" href="#Начало">Наверх страницы</a></center>

Как видите стиль кнопки привязан к on_top

Значит надо прописать его стиль, чтобы он красивы выглядел, прописываем в style.css его стиль.

Код PHP:
  1. a#on_top{
  2. display: block;
  3. width:220px;
  4. height:30px;
  5. font-size: 15px;
  6. line-height: 30px;
  7. text-indent: 20px;
  8. text-decoration: none;
  9. margin: 10px;
  10. color: #fff;
  11. background: #1f637c;
  12. border-radius: 6px;
  13. -webkit-border-radius: 6px;
  14. -moz-border-radius: 6px;
  15. -khtml-border-radius: 10px;
  16. }
  17.  
  18. a#on_top:hover{
  19. text-decoration: underline;
  20. }

Все,в итоге мы получаем аккуратную кнопку внизу, нажав которую можно попасть наверх страницы. Не забываем что нажатие кнопки на клавиатуре Home также даст такой же результат. Плюс.. всегда помните, что скролл бесплатен))

Комментарии (3)
Дмитрий #
: +1
Давно искал спс! Пререпробовал кучу вариантов, но постоянно возникали какие то проблеммы. Конфликты с модулями, отправка коментов на форуме или все работало но с подергиванием мне это не нравилось. А тут оказывается все довольно просто)))
Letsgo #
: +1
Да..чем меньше скриптом, тем лучше собственно. Конфликты итд, тоже стараюсь избежать, а то бывало ищешь ошибку и все переберешь а она в простом скрипте.
Banachi #
: 0
Prozaik,спасибо

Голосуем

Самый нужный компонент