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/

非常感谢，瓦森特

LocalScroll水平和垂直滚动（100％高度和100％宽度）

0 个答案: