Scroll to anchor, fullpage sections and more

by Maksim Kachurin

HTML

Как пользоваться: <br />
* Вешаем класс <span>.scroll</span> на элемент (ссылку) <br />
* в атрибут <span>href</span> пишем id нашего элемента. Что бы не срабатывал стандартный функционал браузера по переходу  по якорям, перед <span>id</span> добавляем какую нибудь абракадабру, например <span>href=<span>"./something#ID"</span></span> <br />
* к элементу к которому следует перейти добавляем наш <span>id</span> <br />
-------------------------------------------------------- <br />
Если используем <span>$.fullpage</span> и хотим перейти на страницу вверх, вниз, указываем в href: <br />
- На страницу вверх: <span>href=<span>"./fp#scrollup"</span></span> <br />
- На страницу вниз: <span>href=<span>"./fp#scrolldown"</span></span> <br />
-------------------------------------------------------- <br />
Для скрола в начало, конец документа используем:
- В начало: <span>href=<span>"./fp#scrolltop"</span></span> <br />
- В конец: <span>href=<span>"./fp#scrollbottom"</span></span> <br />
-------------------------------------------------------- <br />

<a href="./fp#scrollup" class="scroll">На страницу вверх</a>
<a href="./fp#scrolldown" class="scroll">На страницу вниз</a>
<a href="./fp#scrolltop" class="scroll">В начало</a>
<a href="./fp#scrollbottom" class="scroll">В конец</a>
<a href="./fp#someId" class="scroll">К элементу с id="someId"</a>

CSS

body {
    font-family: sans-serif;
    font-size: 14px;
    color: #454545;
    line-height: 1.5em;
}

span {
    color: #894545;
    font-style: italic;
}

span > span {
    color: #897834;
}

JavaScript

/**
     * for use:
     * add class "scroll" to link
     * add href: "./page#id"
     * add anchor id to element
     */
    $(".scroll").click(function(event) {
      event.preventDefault();

      //Получаем полный url - например, mysitecom/index.htm#home
      var full_url = this.href;

      //Разделяем url по символу # и получаем имя целевой секции - home в адресе mysitecom/index.htm#home
      var parts = full_url.split("#");
      var trgt = parts[1];

      switch (trgt) {
        case 'scrolldown':
          // Для кнопки вниз сдвигаем на экран вниз
          $.fn.fullpage.moveSectionDown();
          break;
        case 'scrollup':
          // Для кнопки вниз сдвигаем на экран вниз
          $.fn.fullpage.moveSectionUp();
          break;
        case 'scrolltop':
          $("html, body").animate({
            scrollTop: 0
          }, "slow");
          break;
        case 'scrollbottom':
          $("html, body").animate({
            scrollBottom: 0
          }, "slow");
          break;
        default:
          //Получаем смещение сверху для целевой секции
          var target_offset = $("#" + trgt).offset();
          var target_top = target_offset.top;
          //Переходим в целевую секцию установкой позиции прокрутки страницы в позицию целевой секции
          $('html, body').animate({
            scrollTop: target_top
          }, 500);
      }

    });