Форум

utb · #1 (**permalink**) 22.06.2014, 15:57

Здравствуйте,
помогите разобраться: есть блок со списком, при выборе надо скролить к нужному диву в блоке и раскрыть данный блок.

я нахожу нужный id блока и делаю скролл до него:

var setpostion = $('#id1').offset().top;
$('.blockClass').scrollTop(setposition);

При этом первый раз он скролить нормально, но если выбрать следующий по списку элемент, то скролл уходит вверх.

в общем, схема получается такая http://codepen.io/anon/pen/eogAh
нажмите клик, потом клик 2

не могу понять, offset().top не правильно считает ?

рони · #2 (**permalink**) 22.06.2014, 18:38

utb,

<!DOCTYPE html><html class=''>
<head><meta charset='UTF-8'>


<style>.block {
  width: 800px;
  margin: 0 auto;
}
.block_select {
  width: 30%;
  float: left;
}
.block_scroll {
  width: 70%;
  float: left;
  height: 150px;
  overflow: auto;
  position: relative;
}
.block_scroll ul li {
  margin-bottom: 10px;
}
.block_scroll_hidden {
  display: none;
}
#id15 {
  color: #f00;
}
</style></head><body>
<html>
  <head>
    <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
  </head>
  <body>
    <div class="block">
      <div class="block_select">
        <div class="id15">Клик15</div>
        <div class="id16">Клик 16</div>
      </div>
      <div class="block_scroll">
        <ul>
          <li><span>Lorem ipsum dolor sit amet, consectetuer adipiscing elit.</span>
          <div class="block_scroll_hidden">
            etogo ne bylo
          </div>
          </li>
           <li><span>Lorem ipsum dolor sit amet, consectetuer adipiscing elit 2.</span>
          <div class="block_scroll_hidden">
            etogo ne bylo
          </div>
          </li>
           <li><span>Lorem ipsum dolor sit amet, consectetuer adipiscing elit 3.</span>
          <div class="block_scroll_hidden">
            etogo ne bylo
          </div></li>
                <li><span>Lorem ipsum dolor sit amet, consectetuer adipiscing elit.</span>
          <div class="block_scroll_hidden">
            etogo ne bylo
          </div>
          </li>
           <li><span>Lorem ipsum dolor sit amet, consectetuer adipiscing elit 2.</span>
          <div class="block_scroll_hidden">
            etogo ne bylo
          </div>
          </li>
           <li><span>Lorem ipsum dolor sit amet, consectetuer adipiscing elit 3.</span>
          <div class="block_scroll_hidden">
            etogo ne bylo
          </div></li>
                <li><span>Lorem ipsum dolor sit amet, consectetuer adipiscing elit.</span>
          <div class="block_scroll_hidden">
            etogo ne bylo
          </div>
          </li>
           <li><span>Lorem ipsum dolor sit amet, consectetuer adipiscing elit 2.</span>
          <div class="block_scroll_hidden">
            etogo ne bylo
          </div>
          </li>
           <li><span>Lorem ipsum dolor sit amet, consectetuer adipiscing elit 3.</span>
          <div class="block_scroll_hidden">
            etogo ne bylo
          </div> </li>
                <li><span>Lorem ipsum dolor sit amet, consectetuer adipiscing elit.</span>
          <div class="block_scroll_hidden">
            etogo ne bylo
          </div>
          </li>
           <li id="id15"><span>Lorem ipsum dolor sit amet, consectetuer adipiscing elit 2.1515</span>
          <div class="block_scroll_hidden">
            etogo ne bylo
          </div>
          </li>
           <li id="id16"><span>Lorem ipsum dolor sit amet, consectetuer adipiscing elit 3161616.</span>
          <div class="block_scroll_hidden">
            etogo ne bylo
          </div></li>
                <li><span>Lorem ipsum dolor sit amet, consectetuer adipiscing elit.</span>
          <div class="block_scroll_hidden">
            etogo ne bylo
          </div>
          </li>
           <li><span>Lorem ipsum dolor sit amet, consectetuer adipiscing elit 2.</span>
          <div class="block_scroll_hidden">
            etogo ne bylo
          </div>
          </li>
           <li><span>Lorem ipsum dolor sit amet, consectetuer adipiscing elit 3.</span>
          <div class="block_scroll_hidden">
            etogo ne bylo
          </div></li>
                <li><span>Lorem ipsum dolor sit amet, consectetuer adipiscing elit.</span>
          <div class="block_scroll_hidden">
            etogo ne bylo
          </div>
          </li>
           <li><span>Lorem ipsum dolor sit amet, consectetuer adipiscing elit 2.</span>
          <div class="block_scroll_hidden">
            etogo ne bylo
          </div>
          </li>
           <li><span>Lorem ipsum dolor sit amet, consectetuer adipiscing elit 3.</span>
          <div class="block_scroll_hidden">
            etogo ne bylo
          </div></li>
                <li><span>Lorem ipsum dolor sit amet, consectetuer adipiscing elit.</span>
          <div class="block_scroll_hidden">
            etogo ne bylo
          </div>
          </li>
           <li><span>Lorem ipsum dolor sit amet, consectetuer adipiscing elit 2.</span>
          <div class="block_scroll_hidden">
            etogo ne bylo
          </div>
          </li>
           <li><span>Lorem ipsum dolor sit amet, consectetuer adipiscing elit 3.</span>
          <div class="block_scroll_hidden">
            etogo ne bylo
          </div>
          </li>

        </ul>
      </div>
    </div>
  </body>
</html>

<script>$(document).ready(function() {
  $('.id15').click(function(){
    var setposition = $('#id15').position().top,
        scroll = $('.block_scroll').scrollTop();
    $('.block_scroll').animate({
				scrollTop: setposition + scroll
		}, 1000);
  });
 $('.id16').click(function(){
    var setposition = $('#id16').position().top,
        scroll = $('.block_scroll').scrollTop();
    $('.block_scroll').animate({
				scrollTop: setposition + scroll
		}, 1000);
  });
})
</script>
</body></html>

utb · #3 (**permalink**) 23.06.2014, 07:53

рони,
огромное спасибо.
немного не понимаю сути, где почитать можно?

scroll = $('.block_scroll').scrollTop();

это для того чтобы он относительно крутил?

рони · #4 (**permalink**) 23.06.2014, 08:22

utb,
можно сделать проще

<!DOCTYPE html><html class=''>
<head><meta charset='UTF-8'>


<style>.block {
  width: 800px;
  margin: 0 auto;
}
.block_select {
  width: 30%;
  float: left;
}
.block_scroll {
  width: 70%;
  float: left;
  height: 150px;
  overflow: auto;
  position: relative;
}
.block_scroll ul li {
  margin-bottom: 10px;
}
.block_scroll_hidden {
  display: none;
}
#id15 {
  color: #f00;
}
</style></head><body>
<html>
  <head>
    <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
  </head>
  <body>
    <div class="block">
      <div class="block_select">
        <div class="id15">Клик15</div>
        <div class="id16">Клик 16</div>
      </div>
      <div class="block_scroll">
        <ul>
          <li><span>Lorem ipsum dolor sit amet, consectetuer adipiscing elit.</span>
          <div class="block_scroll_hidden">
            etogo ne bylo
          </div>
          </li>
           <li><span>Lorem ipsum dolor sit amet, consectetuer adipiscing elit 2.</span>
          <div class="block_scroll_hidden">
            etogo ne bylo
          </div>
          </li>
           <li><span>Lorem ipsum dolor sit amet, consectetuer adipiscing elit 3.</span>
          <div class="block_scroll_hidden">
            etogo ne bylo
          </div></li>
                <li><span>Lorem ipsum dolor sit amet, consectetuer adipiscing elit.</span>
          <div class="block_scroll_hidden">
            etogo ne bylo
          </div>
          </li>
           <li><span>Lorem ipsum dolor sit amet, consectetuer adipiscing elit 2.</span>
          <div class="block_scroll_hidden">
            etogo ne bylo
          </div>
          </li>
           <li><span>Lorem ipsum dolor sit amet, consectetuer adipiscing elit 3.</span>
          <div class="block_scroll_hidden">
            etogo ne bylo
          </div></li>
                <li><span>Lorem ipsum dolor sit amet, consectetuer adipiscing elit.</span>
          <div class="block_scroll_hidden">
            etogo ne bylo
          </div>
          </li>
           <li><span>Lorem ipsum dolor sit amet, consectetuer adipiscing elit 2.</span>
          <div class="block_scroll_hidden">
            etogo ne bylo
          </div>
          </li>
           <li><span>Lorem ipsum dolor sit amet, consectetuer adipiscing elit 3.</span>
          <div class="block_scroll_hidden">
            etogo ne bylo
          </div> </li>
                <li><span>Lorem ipsum dolor sit amet, consectetuer adipiscing elit.</span>
          <div class="block_scroll_hidden">
            etogo ne bylo
          </div>
          </li>
           <li id="id15"><span>Lorem ipsum dolor sit amet, consectetuer adipiscing elit 2.1515</span>
          <div class="block_scroll_hidden">
            etogo ne bylo
          </div>
          </li>
           <li id="id16"><span>Lorem ipsum dolor sit amet, consectetuer adipiscing elit 3161616.</span>
          <div class="block_scroll_hidden">
            etogo ne bylo
          </div></li>
                <li><span>Lorem ipsum dolor sit amet, consectetuer adipiscing elit.</span>
          <div class="block_scroll_hidden">
            etogo ne bylo
          </div>
          </li>
           <li><span>Lorem ipsum dolor sit amet, consectetuer adipiscing elit 2.</span>
          <div class="block_scroll_hidden">
            etogo ne bylo
          </div>
          </li>
           <li><span>Lorem ipsum dolor sit amet, consectetuer adipiscing elit 3.</span>
          <div class="block_scroll_hidden">
            etogo ne bylo
          </div></li>
                <li><span>Lorem ipsum dolor sit amet, consectetuer adipiscing elit.</span>
          <div class="block_scroll_hidden">
            etogo ne bylo
          </div>
          </li>
           <li><span>Lorem ipsum dolor sit amet, consectetuer adipiscing elit 2.</span>
          <div class="block_scroll_hidden">
            etogo ne bylo
          </div>
          </li>
           <li><span>Lorem ipsum dolor sit amet, consectetuer adipiscing elit 3.</span>
          <div class="block_scroll_hidden">
            etogo ne bylo
          </div></li>
                <li><span>Lorem ipsum dolor sit amet, consectetuer adipiscing elit.</span>
          <div class="block_scroll_hidden">
            etogo ne bylo
          </div>
          </li>
           <li><span>Lorem ipsum dolor sit amet, consectetuer adipiscing elit 2.</span>
          <div class="block_scroll_hidden">
            etogo ne bylo
          </div>
          </li>
           <li><span>Lorem ipsum dolor sit amet, consectetuer adipiscing elit 3.</span>
          <div class="block_scroll_hidden">
            etogo ne bylo
          </div>
          </li>

        </ul>
      </div>
    </div>
  </body>
</html>

<script>$(document).ready(function() {
  $('.id15').click(function(){
    var setposition = $('#id15').position().top;
    $('.block_scroll').animate({
				scrollTop: '+=' +setposition
		}, 1000);
  });
 $('.id16').click(function(){
    var setposition = $('#id16').position().top;
    $('.block_scroll').animate({
				scrollTop: '+=' +setposition
		}, 1000);
  });
})
</script>
</body></html>

Форум

Справочник

Discord чат

Курсы javascript