主页 / 问题 / 805494
Accepted
Анатолий
Asked:2020-03-27 22:54:09 +0000 UTC2020-03-27 22:54:09 +0000 UTC

滚动到 DIV 内的元素

  • 772

如何在打开页面时将带有类的 DIV 滚动dialogs_box到带有 ID 的元素，com-11或者只是将 DIV 滚动到末尾？

.dialogs_box {
    padding: 5px;
    border: 1px solid #CCC;
    -webkit-border-radius: 3px;
    border-radius: 3px;
    margin: 10px;
    max-height: 300px;
    overflow: hidden;
    overflow-y: auto;
}

.coment {
  padding:20px;
  border:1px solid #CCC;
  margin:5px;
}
<div class="dialogs_box">

  <div class="coment" id="com-1">текст</div>
  <div class="coment" id="com-2">текст</div>
  <div class="coment" id="com-3">текст</div>
  <div class="coment" id="com-4">текст</div>
  <div class="coment" id="com-5">текст</div>
  <div class="coment" id="com-6">текст</div>
  <div class="coment" id="com-7">текст</div>
  <div class="coment" id="com-8">текст</div>
  <div class="coment" id="com-9">текст</div>
  <div class="coment" id="com-10">текст</div>
  <div class="coment" id="com-11">текст</div>
  <div class="coment" id="com-12">текст</div>

</div>

jquery

2 个回答

  1. Best Answer

    $(".dialogs_box").scrollTop($("#com-11").position().top);
    .dialogs_box {
    padding: 5px;
    border: 1px solid #CCC;
    -webkit-border-radius: 3px;
    border-radius: 3px;
    margin: 10px;
    max-height: 300px;
    overflow: hidden;
    overflow-y: auto;
}

.coment {
  padding:20px;
  border:1px solid #CCC;
  margin:5px;
}
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="dialogs_box">

  <div class="coment" id="com-1">текст</div>
  <div class="coment" id="com-2">текст</div>
  <div class="coment" id="com-3">текст</div>
  <div class="coment" id="com-4">текст</div>
  <div class="coment" id="com-5">текст</div>
  <div class="coment" id="com-6">текст</div>
  <div class="coment" id="com-7">текст</div>
  <div class="coment" id="com-8">текст</div>
  <div class="coment" id="com-9">текст</div>
  <div class="coment" id="com-10">текст</div>
  <div class="coment" id="com-11">текст</div>
  <div class="coment" id="com-12">текст</div>

</div>

    • 3

  2. 只挂一个处理程序animate 

    $(document).ready(function (){
  $('html, body').animate({
    scrollTop: $("#com-6").offset().top
  }, 2000);
});
   
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<div class="dialogs_box">

  <div class="coment" style="height:200px" id="com-1">текст1</div>
  <div class="coment" style="height:200px" id="com-2">текст2</div>
  <div class="coment" style="height:200px" id="com-3">текст3</div>
  <div class="coment" style="height:200px" id="com-4">текст4</div>
  <div class="coment" style="height:200px" id="com-5">текст5</div>
  <div class="coment" style="height:200px" id="com-6">текст6</div>
  <div class="coment" style="height:200px" id="com-7">текст7</div>
  <div class="coment" style="height:200px" id="com-8">текст8</div>
  <div class="coment" style="height:200px" id="com-9">текст9</div>
  <div class="coment" style="height:200px" id="com-10">текст10</div>
  <div class="coment" style="height:200px" id="com-11">текст11</div>
  <div class="coment" style="height:200px" id="com-12">текст12</div>

</div>

    • 0

相关问题