JQuery, ScrollTop прокручивает до последнего div, а не ID div - PullRequest
Новая
       2

JQuery, ScrollTop прокручивает до последнего div, а не ID div

2 голосов
/ 16 ноября 2010

Так что я в основном использую ссылку, чтобы прокрутить серию div, чтобы выбрать правильный.Т.е. нажмите на «happy» и прокрутите до «happy» div,

Однако, прокрутка, похоже, не идет к тому, с чем она связана, а прокручивает до третьего div в списке.

Вот код: 

<div id="portfoliowrapper">
        <div class="title">My Portfolio</div>
        <div class="row1"><a id="kazookilink" href="#">Kazooki</a></div>
        <div class="row1"><a id="uodlink" href="#">Universe of Downhill</a></div>
        <div class="row1"><a id="kudialink" href="#">Kudia</a></div>
    </div>
    <div id="description">
        <div id="top">description</div>
        <div id="kazooki">kazooki</div>
        <div id="uod">Universe of Downhill</div>
        <div id="kudia">kudia</div>
    </div>



 <script type="text/jscript">

      function goToByScroll(id){
      id = id.replace("link", "");    
      $("#description").animate({scrollTop: $("#"+id).offset().top},'slow');
      };

      $(".row1 > a").click(function(e) { 
        // Call the scroll function
      goToByScroll($(this).attr("id"));           
      });

 </script>

Ответы [ 3 ]

1 голос
/ 17 ноября 2010

Необходимо использовать position() вместо offset(), а также установить #description на position:relative.

Тогда вам нужно учесть текущее значение scrollTop.

Последнее, что вам нужно отменить поведение по умолчанию щелчка.

Полный пример на http://www.jsfiddle.net/gaby/TneA6/

0 голосов
/ 16 ноября 2010

Полагаю, вам нужно предотвратить обычное поведение клика: 

  $(".row1 > a").click(function(e) { 
        // prevent default behaviour
        e.preventDefault();
        // Call the scroll function
        goToByScroll($(this).attr("id"));           
  });

Просто догадываюсь.

0 голосов
/ 16 ноября 2010

Вероятно, это просто прокрутка до самого низа страницы - он не может выровнять верхнюю часть div с верхом страницы, потому что страница заканчивается. Попробуйте добавить кучу пустого пространства внизу страницы (<div style='height: 1000px;"></div> или что-то в этом роде) и посмотрите, приведет ли это к непредвиденному поведению.

...