Question

我想使用jquery滚动来创建项目。但它有一些问题，我想将滚动的底部元素移动到第一行，但它不移动第一行。只是移动到中间线的一半。

如何解决这个问题，

enter image description here 例子）我希望五个数字位于2。

<html lang="en">
<head>
  <meta charset="utf-8">
  <title>scrollTop demo</title>
  <style>
  div.demo {
    width: 200px;
    height: 100px;
    overflow: scroll;
  }

  </style>
  <script src="lib/jquery/jquery-1.10.2.min.js"></script>
</head>
<body>

<div class="demo" id="divDemo">
    <div style="float:left">
        <ul>
            <li>1</li>
            <li>2</li>
            <li>3</li>
            <li>4</li>
            <li>5</li>
        </ul>
    </div>
    <div style="float:left">
        <ul>
            <li>1</li>
            <li>2</li>
            <li>3</li>
            <li>4</li>
            <li>5</li>
        </ul>
    </div>
    <div style="float:left">
        <ul>
            <li>1</li>
            <li>2</li>
            <li>3</li>
            <li>4</li>
            <li id="li5">5</li>
        </ul>
    </div>
</div>

<script>
    $("#divDemo").scrollTop(1000);
</script>

</body>
</html>

ps）最后连接到第一个的循环也没问题谢谢你的回复。

Answer 1

据我了解你，试试看：

LIVE DEMO

$(document).ready(function() {

    $("#divDemo").animate({ scrollTop: $("#li5").offset().top },"linear");
});

更新：

CSS：

.demo {
    width: 200px;
    height: 110px; /* Show this little detail, it`s 10px higher */
    overflow: scroll;
  }

/* PLAY WITH THIS AROUND */
ul {
  height: 200px;
}

JQ：

$("#divDemo").animate({ scrollTop: $("#li5").offset().top - 10 },"linear");
                               /* set the offset (- 10px)---^^ */

如何使用jquery滚动将底部元素移动到第一行

1 个答案: