При чтении статьи иногда бывает необходимо быстро перейти в ее начало, пользоваться скроллом мыши в данном случае не очень удобно. Тут то и пригодится кнопка, которая мгновенно перенесет посетителя сайта в начало страницы. Назовем ее кнопкой “вверх”.
Создание кнопки “вверх” подразделяется на следующие части:

HTML

Размещаем на странице блок со ссылкой, которому присваиваем уникальный ID.

<div id="buttonUp"><a href="#">UP</a></div>

CSS

Оформление кнопки. Обратите внимание на стилевое свойство и его значение - position:fixed. Очень важное свойство позволяющее кнопке “вверх” зафиксироваться в определенной позиции на странице, и не перемещаться по документу при скроллинге.

#buttonUp{
  display:none;
  position:fixed;
  width:100px;
  padding:10px;
  text-align:center;
  background-color:black;
}

#buttonUp a{font:12px Tahoma;color:#fff;}

JQuery

Ну и наконец, скрипт на JQuery, который будет отображать или скрывать с экрана кнопку вверх, когда это необходимо.

$(document).ready(function(){
  //Высота окна браузера
  var HeightScreen = $(window).height();

  //Положение кнопки на странице
  $("#buttonUp").css({"bottom":"10px","left":"10px"});

  //Функция срабатывает при скроллинге страницы
  $(window).scroll(function () {
    /*
    Если расстояние от начала страницы до текущего расположения
    документа превышает высоту окна браузера, то отображать кнопку
    вверх, иначе скрывать.
    */
    if (HeightScreen<$(document).scrollTop()){
      if ($("#buttonUp").css("display")=="none"){
        $("#buttonUp").fadeIn("slow");
      }
    }else{
      if ($("#buttonUp").css("display")=="block"){
        $("#buttonUp").fadeOut("slow");
      }
    }
  });
});

Добавлено: 23 Февраля 2015 06:19:57 Добавил: Андрей Ковальчук Нравится 0

Добавить