jquery没有滚动到div ID

我目前正试图使用jQuery滚动到某个div id。jquery没有滚动到div ID

代码如下。

jQuery(document).ready(function($){ 
    var prevScrollTop = 0; 
    var $scrollDiv = jQuery('div#container'); 
    var $currentDiv = $scrollDiv.children('div:first-child'); 

    var $sectionid = 1; 
    var $numsections = 5; 

    $scrollDiv.scroll(function(eventObj) 
    { 
     var curScrollTop = $scrollDiv.scrollTop(); 
     if (prevScrollTop < curScrollTop) 
     { 
     // Scrolling down: 
      if ($sectionid+1 > $numsections) { 
       console.log("End Panel Reached"); 
      } 
      else { 
       $currentDiv = $currentDiv.next().scrollTo(); 
       console.log("down"); 
       console.log($currentDiv); 
       $sectionid=$sectionid+1; 
       console.log($currentDiv.attr('id')); 
       var divid =$currentDiv.attr('id'); 
       jQuery('html, body').animate({scrollTop:jQuery('#'+divid).position().top}, 'slow'); 
       } 
     } 
     else if (prevScrollTop > curScrollTop) 
     { 
     // Scrolling up: 
      if ($sectionid-1 == 0) { 
       console.log("Top Panel Reached"); 
      } 
      else { 
       $currentDiv = $currentDiv.prev().scrollTo(); 
       console.log("up"); 
       console.log($currentDiv); 
       $sectionid=$sectionid-1; 
       var divid =$currentDiv.attr('id'); 
       jQuery('html, body').animate({scrollTop:jQuery('#'+divid).position().top}, 'slow'); 

       } 
     } 
     prevScrollTop = curScrollTop; 
    }); 
});

我可以从chrome控制台验证所有值（即div ID）是否正确。然而，根本没有动画。

网站是这样的。

<div id="header"> 
<!-- Floating Header --> 
</div> 
<div id="container"> 
    <div id="panel1"> 
     <!--content of panel1 --> 
    </div> 
    <div id="panel2"> 
     <!--content of panel2 --> 
    </div> 
    <div id="panel3"> 
     <!--content of panel3 --> 
    </div> 
</div>

需要滚动的部分是100％的宽度/高度的面板，其是容器，该容器是一个滚动的div内部。

来源

2012-10-06 Sandy Dolphinaura

你可以分享[的jsfiddle]相同（http://jsfiddle.net） – Ankur

你有.scrollTo插件吗？ – MLM

@MLM：['scrollTop（）']（http://api.jquery.com/scrollTop/）是一种jQuery方法，而不是插件。除非我误解了什么？（这当然，*完全可能！*） –

修正了它。

仅供参考，因为div的是在div容器...

jQuery('html, body').animate({scrollTop:jQuery('#'+divid).position().top}, 'slow');

应该

jQuery('#container').animate({scrollTop:jQuery('#'+divid).position().top}, 'slow');

来源

2012-10-06 20:18:14

jquery没有滚动到div ID

回答

相关问题