如何控制另一個div內的可滾動div的位置？

Question

我想讓可滾動內部div跳回到底部，但.css（）和.animate（）似乎都不起作用。

http://jsfiddle.net/1yzpot2b/

var $fixedHolder = $('#fixedHolder'), 
 
    $slidingHolder = $('#slidingHolder'); 
 

 
$fixedHolder.on('scroll', function onScroll() { 
 
    var scrollTop = $fixedHolder.scrollTop(); 
 

 
    console.log('scrollTop', scrollTop); 
 

 
    if (scrollTop >= 290) { 
 
     console.info('jump up'); 
 

 
     $fixedHolder.off('scroll'); 
 

 
     $slidingHolder.css({ 
 
      top: '10px' 
 
     }); 
 

 
     $slidingHolder.animate({ 
 
      scrollTop: 0 
 
     }, 200); 
 
    } 
 
});

#fixedHolder { 
 
    width: 30px; 
 
    height: 100px; 
 
    overflow-y: scroll; 
 
    border: 1px solid #ccc; 
 
    position: relative; 
 
} 
 
#slidingHolder { 
 
    position: absolute; 
 
}

<div id="fixedHolder"> 
 
    <div id="slidingHolder">a b c d e f g h i j k l m n o p q r s t v z x</div> 
 
</div>

Answer 1

我不是100％肯定你想實現什麼，但它看起來像你試圖設置錯誤的元素的scrollTop和你scrollTop290的值太大了。您可以通過將$slidingHolder的高度減去$fixedHolder高度來計算此最大滾動高度。

參見：http://jsfiddle.net/1yzpot2b/3/或運行片段：

var $fixedHolder = $('#fixedHolder'), 
 
    $slidingHolder = $('#slidingHolder'); 
 

 
$fixedHolder.on('scroll', function onScroll() { 
 
    var scrollTop = $fixedHolder.scrollTop(); 
 

 
    console.log('scrollTop', scrollTop); 
 

 
    var maxScroll = $slidingHolder.height() - $fixedHolder.height(); 
 
    if (scrollTop >= maxScroll) { 
 
     console.info('jump up'); 
 
     /* 
 
     dunno about these : 
 
     $fixedHolder.off('scroll'); 
 

 
     $slidingHolder.css({ 
 
      top: '10px' 
 
     }); 
 
     */ 
 
     $fixedHolder.animate({ 
 
      scrollTop: 0 
 
     }, 200); 
 
    } 
 
});

#fixedHolder { 
 
    width: 30px; 
 
    height: 100px; 
 
    overflow-y: scroll; 
 
    border: 1px solid #ccc; 
 
    position: relative; 
 
} 
 
#slidingHolder { 
 
    position: absolute; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> 
 
<div id="fixedHolder"> 
 
    <div id="slidingHolder">a b c d e f g h i j k l m n o p q r s t v z x</div> 
 
</div>