Question

我尝试创建一个jQuery脚本，它可以将div滚动到指定的ID元素（这个div是另一个，主div）。我有一个问题，因为我所做的一切，使脚本滚动到div的底部，我不知道问题出在哪里。

这是我的HTML：

<html>
<body>
  <style>
     .chat {
         height: 100px;
          overflow-y: scroll;
     }
  </style>
  <div id="main_cointainer">
    Lorem ipsum dolor sit amet enim. Etiam ullamcorper. Suspendisse a pellentesque dui, non felis. Maecenas malesuada elit lectus felis, malesuada ultricies. Curabitur et ligula. Ut molestie a, ultricies porta urna. Vestibulum commodo volutpat a, convallis ac, laoreet enim. Phasellus fermentum in, dolor. Pellentesque facilisis. Nulla imperdiet sit amet magna. Vestibulum dapibus, mauris nec malesuada fames ac turpis velit, rhoncus eu, luctus et interdum adipiscing wisi. Aliquam erat ac ipsum. Integer aliquam purus. Quisque lorem tortor fringilla sed, vestibulum id, eleifend justo vel bibendum sapien massa ac turpis faucibus orci luctus non, consectetuer lobortis quis, varius in, purus. Integer ultrices posuere cubilia Curae, Nulla ipsum dolor lacus, suscipit adipiscing. Cum sociis natoque penatibus et ultrices volutpat. Nullam wisi ultricies a, gravida vitae, dapibus risus ante sodales lectus blandit eu, tempor diam pede cursus vitae, ultricies eu, faucibus quis, porttitor eros cursus lectus, pellentesque eget, bibendum a, gravida ullamcorper quam. Nullam viverra consectetuer. Quisque cursus et, porttitor risus. Aliquam sem. In hendrerit nulla quam nunc, accumsan congue. Lorem ipsum primis in nibh vel risus. Sed vel lectus. Ut sagittis, ipsum dolor quam.
    <br><br>
    Lorem ipsum dolor sit amet enim. Etiam ullamcorper. Suspendisse a pellentesque dui, non felis. Maecenas malesuada elit lectus felis, malesuada ultricies. Curabitur et ligula. Ut molestie a, ultricies porta urna. Vestibulum commodo volutpat a, convallis ac, laoreet enim. Phasellus fermentum in, dolor. Pellentesque facilisis. Nulla imperdiet sit amet magna. Vestibulum dapibus, mauris nec malesuada fames ac turpis velit, rhoncus eu, luctus et interdum adipiscing wisi. Aliquam erat ac ipsum. Integer aliquam purus. Quisque lorem tortor fringilla sed, vestibulum id, eleifend justo vel bibendum sapien massa ac turpis faucibus orci luctus non, consectetuer lobortis quis, varius in, purus. Integer ultrices posuere cubilia Curae, Nulla ipsum dolor lacus, suscipit adipiscing. Cum sociis natoque penatibus et ultrices volutpat. Nullam wisi ultricies a, gravida vitae, dapibus risus ante sodales lectus blandit eu, tempor diam pede cursus vitae, ultricies eu, faucibus quis, porttitor eros cursus lectus, pellentesque eget, bibendum a, gravida ullamcorper quam. Nullam viverra consectetuer. Quisque cursus et, porttitor risus. Aliquam sem. In hendrerit nulla quam nunc, accumsan congue. Lorem ipsum primis in nibh vel risus. Sed vel lectus. Ut sagittis, ipsum dolor quam.
    <br><br>
    <div class="chat">
      <p id="msg_70_3">
        something msg 0<br><br>
      </p>
       <p id="msg_71_3">
        something msg 1<br><br>
      </p>
       <p id="msg_72_3">
        something msg 2<br><br>
      </p>
       <p id="msg_73_3">
       <span style="color: red;">something msg 3 - HERE STOP SCROLL</span><br><br>
      </p>
       <p id="msg_74_3">
        something msg 4<br><br>
      </p>
       <p id="msg_75_3">
        something msg 5<br><br>
      </p>
       <p id="msg_76_3">
        something msg 6<br><br>
      </p>
       <p id="msg_77_3">
        something msg 7<br><br>
      </p>
       <p id="msg_78_3">
        something msg 8<br><br>
      </p>
    </div>
  </div>
</body>
</html>

我的jQuery脚本：

$('#main_cointainer .chat').delay(1000).animate({
    scrollTop: $('#msg_73_3').offset().top
}, 'slow');

jsFiddle：https://jsfiddle.net/x7uxg7ga/

正如你所看到的，滚动到了.chat div的底部，我不知道为什么......我设置了p元素的ID：msg_73_3所以它可以停止在这个元素上，但事实并非如此。

这是另一个文件，它显示了良好的结果：https://jsfiddle.net/kefnvqh1/

我这样做是因为我设置了：

    scrollTop: 180

但是这个脚本应该自动计算这个高度。

感谢。

Answer 1

尝试使用＆＃34; body＆＃34;而不是选择元素。代替。

$('html, body').delay(1000).animate({
    scrollTop: $('#msg_73_3').offset().top
}, 'slow');

请查看：https://jsfiddle.net/x7uxg7ga/1/

jQuery - 滚动到元素到另一个元素

1 个答案: