0

I am trying to get a sing-page-scroll website to scroll automatically to relevant sections when the link from the Navigation is clicked on. I would like to use ScrollTo / LocalScroll to accomplish this.

Challenge 1: Each section should occupy the full width and height of the page.

Challenge 2: Sub-sections A,B,C etc should scroll horizontally and Main Sections 1,2,3,4 should scroll vertically.

Challenge 3 (Optional): Is there a way to show only the current section and hide the other sections, but still be able to ScrollTo the relevant page.

I would greatly appreciate any feedback or help I receive!

<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 -->

Fiddle: http://jsfiddle.net/qWL2Z/20/

Many Thanks, Vasanth

Vasanth
  • 49
  • 7
  • 1
    Take a look at this plugin: http://alvarotrigo.com/fullPage/ It might save your lot of work. – Alvaro Oct 18 '13 at 14:51
  • Hello, Alvaro - That looks fantastic! I really like the flexibility this plugin offers. I've a few questions: 1. I notice there's a slight delay when scrolling from one slide to another. Can I adjust this delay? (Not the speed of the animation). 2. Is it possible to scroll to the next section only after I complete scanning the whole of the current section? Coz currently, even before I can complete reading the page, it scrolls all the way to the next section. 3. How are pages scaled from edge to edge? Is it done in javascript or is this purely handled via CSS? – Vasanth Oct 18 '13 at 18:07
  • 1) It is not currently possible. Just accessing to the code. But this is quite tricky as if you scroll using a laptop trackpad or an Apple trackpad in both laptop and mouse, then you might find it difficult to stop at the desired section. (see [this](https://github.com/alvarotrigo/fullPage.js/issues/18)) 2) I don't really understand what you mean, but you might be talking about a bigger content than the section height. In that case you can use the option `scrollOverflow` setting it to `true`. – Alvaro Oct 19 '13 at 18:11
  • 3) The size of sections and slides is calculated with Javascript. – Alvaro Oct 19 '13 at 18:12

0 Answers0