jquery - 滚动按钮以显示溢出图像

Question

我有一个应用了溢出隐藏的图像，但我想要的是一个滚动按钮，单击后会缓慢滚动到图像底部。

.img-holder {
    width: 100%;
    height: 300px;
    overflow: auto;
}

<div class="img-holder">
    <img src="http://placehold.it/350x600">
</div>

这可能吗？

谢谢

Answer 1

类似这样的事情:

$('.scroll-button').on('click', function(){
  var imgBox = $(this).next('.img-holder');
  imgBox.animate({
      scrollTop: imgBox.children('img').outerHeight(true)
  }, 2000);
});

.img-holder {
    width: 100%;
    height: 300px;
    overflow: auto;
}

.scroll-button {
  cursor:pointer;
}

.scroll-button:hover {
  background-color: orange;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<span class="scroll-button">Click to scroll</span>
<div class="img-holder">
    <img src="http://placehold.it/350x600">
</div>

这也应该适用于多个图像框。您所需要做的就是使用示例中所示的相同标记。