滚动到特定 在里面 with jquery

Question

我正在编写一个简单的聊天应用程序，其中包含包含聊天消息的可滚动div（每个聊天消息都是段落<p> chatmessage </ p>）。加载页面后，div显示10条最新消息。我想要实现的是，如果我滚动聊天div，它将预先添加10个消息并自动滚动它，以便最后一个前置消息显示在div窗口的顶部。

HTML看起来只是为了得到这个想法：

            <div id="chatscrollbox" >
                <div id="chatcontent" >
                    <p>10</p>
                    <p>9</p>
                    <p>8</p>
                    <p>7</p>
                    <p>6</p>
                    <p>5</p>
                    <p>4</p>
                    <p>3</p>
                    <p>2</p>
                    <p>1</p>
                </div>
            </div>

向上滚动div，它将在11-20之前添加消息，从上到下的内容读取现在看起来是：20,19,18 ... 3,2,1。

一切正常，除了我不知道如何用特殊的jquery滚动div

里面的元素（没有名字，没有classe）。在jquery中有类似的东西：滚动到X-th

div里面的元素？或者如果没有这样的命令怎么实现呢？在我的例子中，我想滚动到第11个元素。谢谢

Answer 1

由于你的p标签是<div id="chatcontent" >的直接后代，你可以创建一个像这样的p数组：

let nthP = $("#chatcontent").children("p");

您也可以直接使用选择器获取您正在寻找的p：

let myP = $("#chatcontent").find("p:eq(60)");

获得所需的段落后，只需滚动到它即可。

 $('html, body').animate({
      // 60 represents the index of the p you want. Change it...
      // Or use a more specific selector to only grab the one you want (see above)
      scrollTop: $(nthP[60]).offset().top
 }, 2000);

这是一个有效的演示：

let nthP = $("#chatcontent").children("p");
$('html, body').animate({
  scrollTop: $(nthP[60]).offset().top
}, 2000);

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="chatscrollbox">
  <div id="chatcontent">
    <p>10</p>
    <p>9</p>
    <p>8</p>
    <p>7</p>
    <p>6</p>
    <p>5</p>
    <p>4</p>
    <p>3</p>
    <p>2</p>
    <p>1</p>
    <p>10</p>
    <p>9</p>
    <p>8</p>
    <p>7</p>
    <p>6</p>
    <p>5</p>
    <p>4</p>
    <p>3</p>
    <p>2</p>
    <p>1</p>
    <p>10</p>
    <p>9</p>
    <p>8</p>
    <p>7</p>
    <p>6</p>
    <p>5</p>
    <p>4</p>
    <p>3</p>
    <p>2</p>
    <p>1</p>
    <p>10</p>
    <p>9</p>
    <p>8</p>
    <p>7</p>
    <p>6</p>
    <p>5</p>
    <p>4</p>
    <p>3</p>
    <p>2</p>
    <p>1</p>
    <p>10</p>
    <p>9</p>
    <p>8</p>
    <p>7</p>
    <p>6</p>
    <p>5</p>
    <p>4</p>
    <p>3</p>
    <p>2</p>
    <p>1</p>
    <p>10</p>
    <p>9</p>
    <p>8</p>
    <p>7</p>
    <p>6</p>
    <p>5</p>
    <p>4</p>
    <p>3</p>
    <p>2</p>
    <p>1</p>
    <p>10</p>
    <p>9</p>
    <p>8</p>
    <p>7</p>
    <p>6</p>
    <p>5</p>
    <p>4</p>
    <p>3</p>
    <p>2</p>
    <p>1</p>
  </div>
</div>

编辑

要仅滚动溢出的div而不使用动画，只需在div上调用scrollTop：

$("#chatcontent").scrollTop($(myP).offset().top);

这是这个例子的a working fiddle。

Answer 2

您可以使用该位置的哈希部分导航到包含ID的页面元素。

我正在使用setTimeout来演示滚动到。

setTimeout(function(){window.location.hash = "p1";}, 3000);

<div id="chatscrollbox" >
    <div id="chatcontent" >
        <p id="p10">10</p>
        <p id="p9">9</p>
        <p id="p8">8</p>
        <p id="p7">7</p>
        <p id="p6">6</p>
        <p id="p5">5</p>
        <p id="p4">4</p>
        <p id="p3">3</p>
        <p id="p2">2</p>
        <p id="p1">1</p>
    </div>
</div>