在div jquery中滾動到div的頂部

Question

我有一個div包含其他幾個div，我希望能夠點擊哪個div滾動到包含div的頂部。

我不想簡單地滾動到div的頂部，這將是scrollTop：0，我想要點擊該div的任何div來滾動到頂部。

使用scrollTop：$（this）.offset（）。top僅給出相對於容器的偏移量，因此它不正確，因為它只返回一個相對較小的值。

這是設置：

    <div id="container" style="position:relative; height:400px; width:100%; overflow:auto;"> 
<div id="div1" class="clicker" style="height: 1000px; width 100px; ; background:blue">
        Test
    </div>

    <div id="div2" class="clicker" style="height: 1000px; width 100px; background:green">
        Test 2
    </div>

     <div id="div3" class="clicker" style="height: 1000px; width 100px; background:yellow">
        Test 3
    </div>

</div>

用這個JS：

$(".clicker").click(function ()
                    {
                    $('#container').animate({
                        scrollTop: WHAT GOES HERE?
                    }, 2000);

            });

這是jsfiddle：

http://jsfiddle.net/byvL43u6/

干杯

Answer 1

您需要將容器的當前滾動位置與div的位置組合

var container = $('#container');

$(".clicker").click(function () {
    var top = $(this).position().top,
        currentScroll = container.scrollTop();

    container.animate({
        scrollTop: currentScroll + top
    }, 1000);

});

演示http://jsfiddle.net/ucag9dos/2

---

本地演示：

 $(function() { var container = $('#container'); $(".clicker").click(function() { var top = $(this).position().top, currentScroll = container.scrollTop(); container.animate({ scrollTop: currentScroll + top }, 1000); }); }); 

 #container { position: relative; height: 400px; width: 100%; overflow: auto; background: red } .clicker { height: 1000px; width: 100%; } #div1 { background: blue } #div2 { background: green } #div3 { background: yellow } 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> <div id="container"> <div id="div1" class="clicker">Test</div> <div id="div2" class="clicker">Test 2</div> <div id="div3" class="clicker">Test 3</div> </div> 

---

另一種方法是增加所有兄弟姐妹的身高。

Answer 2

它需要的只是0 。

$(".clicker").click(function () {
    $('#container').animate({
        scrollTop: 0
    }, 2000);
});