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

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