1

ここでは、赤、青、緑、黄色の 4 つの div と、それぞれの div にリンクするナビゲーション メニューを作成しました。ナビゲーションのリンクをクリックすると、それぞれの div がアニメーション化され、一番上までスクロールされます。

私はjQueryが初めてなので、解決策を見つけるのは本当に難しいです。ご提供いただけるご支援をいただければ幸いです。

以下は、HTML、CSS、および jquery です。

HTML

<body>
    <div id="wrapper">
      <div id="mainContent">
        <div id="redPage" class="red">
          <p>Red</p>
        </div>
        <div id="bluePage" class="blue">
          <p>blue</p>
        </div>
        <div id="greenPage" class="green">
          <p>green</p>
        </div>
        <div  id="yellowPage" class="yellow">
          <p>yellow</p>
        </div>
      </div>
      <nav>
        <ul>
          <a href="#redPage">
          <li class="red">Red</li>
          </a> 

          <a href="#bluePage">
          <li class="blue">Blue</li>
          </a> 

          <a href="#greenPage">
          <li class="green">Green</li>
          </a>

          <a href="#yellowPage">
          <li class="yellow">Yellow</li>
          </a>
        </ul>
      </nav>
    </div>
</body>

CSS

* {
padding: 0px;
margin: 0px;
text-decoration: none;
}
body {
overflow: hidden;
}
#wrapper {
width: 960px;
height: 500px;
margin: 20px auto;
}
#mainContent {
float: right;
width: 800px;
height: 500px;
overflow: hidden;
}
#redPage {
width: 800px;
height: 500px;
overflow-y: scroll;
}
#bluePage {
width: 800px;
height: 500px;
overflow-y: scroll;
}
#greenPage {
width: 800px;
height: 500px;
overflow-y: scroll;
}
#yellowPage {
width: 800px;
height: 500px;
overflow-y: scroll;
}
nav {
float: left;
width: 160px;
}
nav li {
list-style-type: none;
display: block;
width: 100px;
height: 50px;
margin: 30px 0px 0px 0px;
text-decoration: none;
text-align: center;
box-sizing: border-box;
padding-top: 10px;
padding-left: 10px;
font-size: 24px;
line-height: 30px;
color: white;
}
.red {
background: red;
}
.blue {
background: blue;
}
.green {
background: green;
}
.yellow {
background: yellow;
}

jQuery

 <script>
          $('document').ready(function() {
              $('a[href^="#"]').click(function(){
                  var $target=$(this.hash);
                  if($target.length==0) $target=$('a[name=" '+this.hash.substr(1)+' "]');
                  if($target.length==0) $target=$('#mainContent');

                  $("#mainContent").animate({scrollTop:$target.position().top},900);
                  return false;


              });

          }); 


 </script>
4

3 に答える 3

0

div を下から上にスライドさせて前の div を隠したい場合は、私が作成した次のフィドルを確認してください。

http://jsfiddle.net/F6gsy/

code

私はJQueryにも慣れていないことに注意してください。私がそれを難し​​い方法で行っているかどうか、および可能な最適化について教えてください。

于 2013-06-06T20:36:26.717 に答える