0

Как при открытие страницы прокрутить 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>

1
  • Посмотрите плагин scrollTo для jquery.
    – And
    27 мар 2018 в 15:05

2 ответа 2

3

$(".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>

0

просто повесьте обработчик 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>

1
  • Когда открываю страницу прокручивается к нужному элементу, когда обновляю крутится куда то вверх. Ни че не понимаю. 27 мар 2018 в 15:09

Ваш ответ

Нажимая на кнопку «Отправить ответ», вы соглашаетесь с нашими условиями использования и подтверждаете, что прочитали и поняли наши политику конфиденциальности и нормы поведения.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.