Jquery没有滚动到div id

时间:2012-10-06 18:38:45

标签: jquery

我目前正在尝试使用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。

1 个答案:

答案 0 :(得分:0)

修正了它。

仅供参考,因为div在容器div中...

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

应该是

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