LocalScroll Горизонтальная и вертикальная прокрутка (высота 100% и ширина 100%)

Question

Я пытаюсь заставить веб-сайт с прокруткой отдельных страниц автоматически прокручивать соответствующие разделы при нажатии на ссылку из навигации. Я хотел бы использовать ScrollTo / LocalScroll для достижения этой цели.

Задача 1. Каждый раздел должен занимать всю ширину и высоту страницы.

Задача 2: Подразделы A,B,C и т. Д. Должны прокручиваться горизонтально, а основные разделы 1,2,3,4 должны прокручиваться вертикально.

Задача 3 (Необязательно): есть ли способ показать только текущий раздел и скрыть другие разделы, но при этом иметь возможность прокрутки до соответствующей страницы.

Буду очень признателен за любые отзывы или помощь, которую я получу!

<div class="wrapper"> 
<div id="Navigation" class="transparent85">
    <ul class="level1">
      <li class="current level1"><span class="About"><a rel="tag" href="#Section1" class="home">Section 1</a></span>
        <ul class="level2">
          <li><a rel="next" href="#Section1a" title="Who we are" class="inner">Section 1.A</a></li>
          <li><a rel="next" href="#Section1b" title="Vision and Mission" class="inner">Section 1.B</a></li>
          <li><a rel="next" href="#Section1c" title="Methodology" class="inner">Section 1.C</a></li>
          <li><a rel="next" href="#Section1d" title="Meet the Team" class="inner">Section 1.D</a></li>
        </ul>
      </li>
      <li class="level1"><span class="Services"><a rel="tag" href="#Section2" class="inner">Section 2</a></span>
        <ul class="level2 js">
          <li><a rel="next" href="#Section2a" title="Technology" class="inner">Section 2.A</a></li>
          <li><a rel="next" href="#Section2b" title="Business" class="inner">Section 2.B</a></li>
          <li><a rel="next" href="#Section2c" title="Management" class="inner">Section 2.C</a></li>
          <li><a rel="next" href="#Section2d" title="Continuity" class="inner">Section 2.D</a></li>
        </ul>
      </li>
      <li class="level1"><span class="Projects"><a rel="tag" href="#Section3">Section 3</a></span></li>
      <li class="level1"><span class="Contact"><a rel="tag" href="#Section4">Section 4</a></span>
      </li>
    </ul>
  </div>

<!-- contains all content -->
  <div id="Content">


    <!-- SECTION 1 -->
    <div class="section">
        <div class="content">
            <div class="container">
                <div id="Section1" class="details">Section 1</div>
                <div id="Section1a" class="details">Section 1A</div>
                <div id="Section1b" class="details">Section 1B</div>
                <div id="Section1c" class="details">Section 1C</div>
                <div id="Section1d" class="details">Section 1C</div>
            </div>
        </div>
    </div>

    <!-- SECTION 2 -->
    <div class="section">
        <div class="content">
            <div class="container">
                <div id="Section2" class="details">Section 2</div>
                <div id="Section2a" class="details">Section 2A</div>
                <div id="Section2b" class="details">Section 2B</div>
                <div id="Section2c" class="details">Section 2C</div>
                <div id="Section2d" class="details">Section 2C</div>
            </div>
        </div>
    </div>

    <!-- SECTION 3 -->
    <div class="section">
        <div class="content">
            <div class="container">
                <div id="Section3" class="details">Section 3</div>
            </div>
        </div>
    </div>

    <!-- SECTION 4 -->
    <div class="section">
        <div class="content">
            <div class="container">
                <div id="Section4" class="details">Section 4</div>
            </div>
        </div>
    </div>

</div><!-- #content ends here -->
</div><!-- .wrapper ends here -->

Скрипка: http://jsfiddle.net/qWL2Z/20/

Большое спасибо, Васант