问使用jquery滚动到<div>中的特定<p>
EN

Stack Overflow用户

提问于 2018-02-28 13:48:55

回答 2查看 124关注 0票数 1

我正在编写一个简单的聊天应用程序，由包含聊天消息(每个聊天消息是一个段落< p>chatmessage< /p>)的可滚动div组成。加载页面时，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滚动到

元素(没有名字，没有类)。在jquery中有这样的东西吗:滚动到X-

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

jquery

游戏社交场景解决方案

整合腾讯在社交娱乐及游戏体验方面的技术能力，满足玩家对游戏内即时通信和语音互动的社交刚性需求，提升游戏黏性

回答 2

Stack Overflow用户

发布于 2018-02-28 14:03:31

由于您的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。

票数 1

Stack Overflow用户

发布于 2018-02-28 14:02:25

您可以使用位置的散列部分导航到具有ids的页面元素。

我使用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>