Многие из нас являются активными пользователями социальных сетей, в частности Вконтакте. Отличительной особенностью этой социальной сети является ее интерфейс. Простой и понятный, он делает общение с друзьями по настоящему комфортным. Одной из интерфейсных фишек Вконтакте стала кнопка «Вверх», плавно появляющаяся при прокрутке страницы сайта вниз, в левой части экрана. О том, как сделать такую же кнопку у себя на сайте и пойдет сегодня речь.

Для удобства, разделим создание кнопки на две части: на логику и отображение.

Внешний вид кнопки

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

  <div class="leftbar-wrap">
    <a href="#" class="left-controlbar">
      <span class="active-area">
        <span class="bar-desc">⇑ Вверх</span>
      </span>
    </a>
  </div>

Здесь все просто, в контейнер div с классом leftbar-wrap мы помещаем элемент a.left-controlbar, который и будет выполнять роль кнопки. Вложенные теги span использованы для визуального оформления: подсветки и вывода надписи.

Далее можно перейти к описанию стилей для использованных классов, но мне захотелось пойти немного дальше и добавить кнопку, которая бы возвращала пользователя на место с которого он поднялся вверх. Такая себе кнопка «Вернуться». Для этого html-код был немного дополнен:

  <div class="leftbar-wrap">
  <a href="#0" id="scroll-back">
   <span class="active-area">
    <span class="bar-desc">⇓ Назад</span>
   </span>
  </a>
  <a href="#" class="left-controlbar">
   <span class="active-area">
    <span class="bar-desc">⇑ Вверх</span>
   </span>
  </a>
 </div>

Таким образом, мы добавили еще одну кнопку с похожими свойствами, но с небольшими отличиями. В аттрибуте href элемента a#scroll-back не зря стоит 0 после знака решетки. Туда будет помещаться значение смещения, на котором была нажата кнопка «Вверх», чтобы знать куда потом возвращать пользователя.

Теперь перейдем к описанию стилей для нашей боковой панели с кнопками.

  /* описание контейнера */
  .leftbar-wrap {
    position: fixed;
    height: 100%;
    top: 0;
    left: 0;
  }
  
  /* описание кнопки «Вверх» */
  .left-controlbar {
    height: 100%;
    display: block;
    text-decoration: none;
  }
  
  /* описание кнопки «Вернуться» */
  #scroll-back {
    display: block;
    height: 100%;
    top: 0;
    display: none;
    text-align: center;
  }
  
  /* описание столбца фонового цвета для обеих кнопок */
  .active-area {
    width: 100px;
    height: 100%;
    display: block;
    text-align: center;
  }
  
  /* задаем прозрачность фонового цвета при наведении на активную область страницы */
  .leftbar-wrap:hover .active-area {
    background: rgba(99, 156, 191, 0.2);
  }
  
  /* делаем подсветку немного ярче при наведении на надпись */
  .leftbar-wrap .active-area:hover {
    background: rgba(99, 156, 191, 0.3);
  }
  
  /* центрируем надпись у кнопок */
  .bar-desc {
    top: 50%;
    position: relative;
    display: inline-block;
  }

На этом с внешним видом, пожалуй, закончили.

Управление кнопками

Теперь необходимо вдохнуть в нашу разметку немного жизни. Для этого напишем небольшую функцию на javascript с применением фреймворка jQuery.

  function initSideControls() {
    var control_min_width = $('.active-area').width();
    var content_width = $('#page').width(); //Здесь должна быть ширина вашего сайта (если верстка не резиновая).
    var window_width = $(window).width();
    var $bar_wrap = $('.leftbar-wrap');
    var $bar = $bar_wrap.find('.left-controlbar');
    var $scroll_back = $('#scroll-back');
    var prev_top = parseInt($scroll_back.attr('href').substr(1));
    
    if (window_width - content_width - (2 * control_min_width) > 0) {
      $bar.show();
      
      var bar_width = (window_width - content_width) / 2;
      
      $bar_wrap.css({width: bar_width});
      
      if (!prev_top) $scroll_back.hide();
      
      $bar.off('click').on('click', function(e) {
        e.preventDefault();
        prev_top = $(window).scrollTop();
        $('html, body').animate({scrollTop: 0}, 'normal', function() {
          $scroll_back.attr('href', '#' + prev_top).css({display: 'block', opacity: 0}).animate({opacity: 1}, 'fast');
        });
      });
    }
    else {
      $bar.hide();
    }
  }

Алгоритм функции достаточно простой. После определения всех параметров, мы проверяем поместяться ли наши кнопки в область между левым краем окна браузера и контентом. Это необходимо для того, чтобы кнопки не налазили на содержимое сайта (функцию нужно вызывать каждый раз при изменении размеров окна браузера). Если размер области удовлетворяет условиям, то мы привязываем обработчик прокрутки к самой кнопке «Вверх».

Теперь нужно инициализировать кнопки, вызвав нашу функцию в момент, когда страница полностью загружена. Для этого воспользуемся функцией $(document).ready() из фреймворка jQuery.

  $(document).ready(function() {
    var $scroll_back = $('#scroll-back');
    var $bar = $('.left-controlbar');
    
    var threshold = 300; //порог полной видимости кнопки при скроллинге
    
    $(window)
      /* функция, которая управляет видимостью кнопки "Вверх" в зависимости от положения полос прокрутки */
      .scroll(function() {
        var new_opacity = ($(window).scrollTop() < threshold) ? $(window).scrollTop() / threshold : 1;
        new_opacity ? $bar.show() : $bar.hide();
        $bar.css({opacity: new_opacity});
        var offset = parseInt($scroll_back.attr('href').substr(1));
        if (new_opacity) {
          $scroll_back.hide();
        }
        else {
          if (offset) $scroll_back.css({display: 'block', opacity: 0}).animate({opacity: 1}, 'fast');
        }
      })
      .scroll()
      /* связываем событие изменения размеров окна браузера и функцию инициализации кнопок */
      .resize(initSideControls)
      .resize();
    
    /* функция для возврата пользователя на место, с которого он поднялся вверх */
    $scroll_back.click(function(e) {
      e.preventDefault();
      $('html, body').animate({scrollTop: $(this).attr('href').substr(1)}, 'normal');
      $(this).attr('href', '#0').hide();
    });
  });

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

Посмотреть на живой пример можно прямо здесь. Кнопки реализованы непосредственно на сайте и должны быть расположены чуть левее этого параграфа :-).

Благодарю за внимание.

Рассказать друзьям: