Javascript.RU

Создать новую тему Ответ
 
Опции темы Искать в теме
  #1 (permalink)  
Старый 22.06.2014, 15:57
Аватар для utb
utb utb вне форума
Аспирант
Отправить личное сообщение для utb Посмотреть профиль Найти все сообщения от utb
 
Регистрация: 26.10.2011
Сообщений: 94

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

я нахожу нужный 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
Аватар для рони
Профессор
Отправить личное сообщение для рони Посмотреть профиль Найти все сообщения от рони
 
Регистрация: 27.05.2010
Сообщений: 33,103

Прокрутка к нужной строке в блоке
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>
Ответить с цитированием
  #3 (permalink)  
Старый 23.06.2014, 07:53
Аватар для utb
utb utb вне форума
Аспирант
Отправить личное сообщение для utb Посмотреть профиль Найти все сообщения от utb
 
Регистрация: 26.10.2011
Сообщений: 94

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

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

это для того чтобы он относительно крутил?
Ответить с цитированием
  #4 (permalink)  
Старый 23.06.2014, 08:22
Аватар для рони
Профессор
Отправить личное сообщение для рони Посмотреть профиль Найти все сообщения от рони
 
Регистрация: 27.05.2010
Сообщений: 33,103

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>
Ответить с цитированием
Ответ



Опции темы Искать в теме
Искать в теме:

Расширенный поиск


Похожие темы
Тема Автор Раздел Ответов Последнее сообщение
scrollTop не работает deepslam jQuery 9 15.09.2013 17:39
ScrollTop при overflow: hidden Valdemor Internet Explorer 0 15.08.2013 14:11
Определение scrollTop после обновления окна cartrege Events/DOM/Window 0 31.08.2012 11:07
jQuery. ScrollTop Valdemor jQuery 3 17.06.2012 18:00
Получить некорректный HTML poorking Общие вопросы Javascript 11 28.04.2011 13:43