1

在这里，我创建了四个 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

2

我的答案与 anpsmn 的几乎相同，但我花了很长时间才发布它！我也稍微简化了你的代码，所以希望这会有所帮助。

http://jsfiddle.net/LWUZz/1/

我还将所有位置存储在一个array.

于 2013-06-06T19:30:35.733 回答
0

$target.position().top每次单击导航链接时，原始代码都会进行计算。因此，您的代码第一次完美运行，因为$target.position().top返回正确的最高值，但不是第二次。

为此，您需要在加载时存储所有容器的最高值。

像这样的东西

$('.content').each(function () {
    $(this).attr('data-top', $(this).position().top);
});

在这里，我content为所有容器提供了一个类，并在加载时为所有容器设置了一个属性data-top，然后使用该data-top值进行滚动。

$("#mainContent").animate({
    scrollTop: $target.attr('data-top')
}, 900);

见小提琴

于 2013-06-06T19:14:02.367 回答
0

如果您希望 div 仅从下到上滑动隐藏前一个 div，请检查我创建的以下小提琴。

http://jsfiddle.net/F6gsy/

code

请注意，我也是 JQuery 的新手，请告诉我我是否正在努力以及是否有任何可能的优化。

于 2013-06-06T20:36:26.717 回答