在 div jquery 内滚动到 div 的顶部

Question

我有一个包含其他几个 div 的 div，我希望能够在单击 div 时滚动到包含 [=33] 的顶部=].

我不想简单地滚动到 div 的顶部，也就是 scrollTop:0，我想要点击 div 的那个 div滚动到顶部。

使用 scrollTop: $(this).offset().top 只给出相对于容器的偏移量，所以它是不正确的，因为它只是 returns 一个相对较小的值。

设置如下：

    <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

只需0。

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

Answer 2

您需要将容器的当前滚动位置与 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>

另一种方法是将所有先前兄弟姐妹的身高相加。

在 div jquery 内滚动到 div 的顶部

Scroll to top of div within a div jquery

javascript

jquery

scroll