Кнопка вверх

Раздел языка JavaScript.
Аватара пользователя
Slash
Администратор
Сообщения: 2031
Поблагодарили: 62 раза

Кнопка вверх

Сообщение Slash » Чт апр 25, 2013 3:29 pm

Если страницы вашего сайта длинные, добавьте для удобство ваших пользователей кнопку вверх. Думаю, что объяснять, что делает эта кнопка не надо, по этому сразу перейду к коду кнопки:
Для начала подключим JavaScript jQuery (если на сайте у вас уже подключена эта библиотекарь, то этого делать не надо), между <head> и </head> вставляем следующий код:

Код: Выделить всё

<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>

Идем дальше, и ищем в своем документе тег: </body> и перед ним вставляем:

Код: Выделить всё

<script type="text/javascript">
$(function()
 {
 $.fn.scrollToTop = function() {
  $(this).hide().removeAttr("href");
  if ($(window).scrollTop() >= "250") $(this).fadeIn("slow")
  var scrollDiv = $(this);
  $(window).scroll(function() {
   if ($(window).scrollTop() <= "250") $(scrollDiv).fadeOut("slow")
   else $(scrollDiv).fadeIn("slow")
  });
  $(this).click(function() {
   $("html, body").animate({scrollTop: 0}, "slow")
  })
 }
});

$(function()
 {
 $("#Go_Top").scrollToTop();
});
</script>

Теперь вставляем саму кнопку, ее можно вставить сразу после предыдущего кода:

Код: Выделить всё

<a href='#' id='Go_Top' title="Вернуться к началу">Наверх</a>

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

Код: Выделить всё

<a href='#' id='Go_Top' title="Вернуться к началу"><img src="полный адрес картинки" alt="Наверх" title="Наверх"></a>

Для поиска нужного рисунка, можно использовать: Сервис поиска иконок
Надеюсь этот пост пойдет на пользу...
Реклама
cefp
Сообщения: 333
Поблагодарили: 3 раза

Re: Кнопка вверх

Сообщение cefp » Вс фев 22, 2015 11:51 pm

Интересно, можно ли сделать такую кнопку без использования JavaScript?
d o h o d - s - n u l y a .ru - идеи бизнеса.
Аватара пользователя
Slash
Администратор
Сообщения: 2031
Поблагодарили: 62 раза

Re: Кнопка вверх

Сообщение Slash » Пн фев 23, 2015 12:19 pm

Самая простая кнопка:

Код: Выделить всё

<a href="#" title="Вверх">Вверх</a

По желанию можно изменить внешний вид кнопки, при помощи CSS.

Вернуться в «JavaScript»

Кто сейчас на конференции

Сейчас этот форум просматривают: нет зарегистрированных пользователей и 1 гость