Question

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

Answer 1

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

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

我还将所有职位存储在array。

中

Answer 2

每次点击导航链接时，原始代码都在计算$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);

See fiddle

Answer 3

如果你希望div只能从下到上隐藏前一个div，那么请检查我创建的以下小提琴。

http://jsfiddle.net/F6gsy/

code

请注意，我也是JQuery的新手，请告诉我，我是否正在以艰难的方式进行任何可能的优化。

使用jquery动画并将div滚动到顶部

3 个答案: