使用jquery设置div动画并将其滚动到顶部_Jquery_Html_Css_Scroll

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

jquery html css scroll

使用jquery设置div动画并将其滚动到顶部,jquery,html,css,scroll,Jquery,Html,Css,Scroll,在这里，我创建了四个div的红色、蓝色、绿色和黄色以及一个导航菜单，链接到各个div。当我单击导航上的链接时，我希望相应的div设置动画并滚动到顶部我是jQuery新手，所以我很难找到解决方案。如果您能提供任何帮助，我们将不胜感激下面是HTML、CSS和jquery HTML <body> <div id="wrapper"> <div id="mainContent"> <div id="redPage" c

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

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>


$（'document'）.ready（函数（）{
$（'a[href^=“#“]”）。单击（函数（）{
var$target=$（this.hash）；
如果（$target.length==0）$target=$（'a[name=“”+this.hash.substr（1）+'”）；
如果（$target.length==0）$target=$（“#mainContent”）；
$（“#mainContent”）.animate（{scrollTop:$target.position（）.top}，900）；
返回false；
});
});

每次单击导航链接时，原始代码都在计算

$target.position（）。top

。因此，当

$target.position（）
要使其工作，您需要存储装载时所有容器本身的顶部值
像这样的
$('.content').each(function () {
    $(this).attr('data-top', $(this).position().top);
});

在这里，我为所有容器指定了一个类content
，在装载时，我为所有容器设置了一个属性data top
，然后使用该data top
值滚动
$("#mainContent").animate({
    scrollTop: $target.attr('data-top')
}, 900);

我的答案与anpsmn的答案几乎相同，但我花了这么长时间才把它贴出来！我也简化了您的代码，希望这能有所帮助

我还将所有位置存储在数组中
如果您希望div仅从下到上滑动以隐藏上一个div，请检查我创建的以下小提琴

请注意，我也是JQuery新手，请告诉我我是否用了很难的方法，是否有任何可能的优化。您的JQuery块中有一个输入错误。。。“documennt”编辑作品：JS Fiddle@
$("#mainContent").animate({
    scrollTop: $target.attr('data-top')
}, 900);

code