滾動不適用於將溢出屬性設置為滾動的div

Question

我有可滾動的javascript函數。

    <script type="text/javascript">
    function scroll() {
    $('html,body').animate({
    scrollTop: $('#3').offset().top}, 2000);
    }
    </script>

在html部分中，我將一個div的溢出屬性設置為可滾動。 #CamListDiv {overflow：scroll; 高度：400px}

    <div id="CamListDiv">
    <div id="1">
    <h1>2</h1>
    <p>bbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbb</p>
    </div>
    <div id="2">
    <h1>1</h1>
    <p>aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa</p>
    </div>
    <h1>4</h1>
    <p>dddddddddddddddd</p>
    <h1>6</h1>
    <p>fffffffffffffffffffffff</p>
    <h1>7</h1>
    <p>dskfjdlskjflskdjflsdkjfl</p>
    <h1>8</h1>
    <p>sdfdsfsdgsgsgg</p>
    <h1>9</h1>
    <p>fhjlsdkj</p>
    <h1>10</h1>
    <div id="3">
    <h1>5</h1>
    <p>eeeeeeeeeeee</p>
    </div>
    </div>
    <input type="button" value="scroll" onclick="scroll()"/>
<

在單擊按鈕時，我試圖將屏幕滾動到特定的ID，但它不起作用

Answer 1

您需要滾動div而不是整個頁面：

$('input').click(function() {
    $('#CamListDiv').animate({ scrollTop: $('#3').offset().top }, 2000);
    return false;
});

http://jsfiddle.net/mrCb6/2/