2

したがって、基本的にリンクを使用して、一連のdivをスクロールして正しいものを選択します。つまり、happyをクリックして、「happy」divまでスクロールします。

ただし、スクロールはリンク先に移動しないようですが、リストの3番目の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>
4

3 に答える 3

1

position()の代わりに使用するoffset()必要があり、またをに設定する必要があり#descriptionますposition:relative。

次に、現在のを考慮する必要がありますscrollTop。

最後に、デフォルトのクリック動作をキャンセルする必要があります。

http://www.jsfiddle.net/gaby/TneA6/の完全な例

于 2010-11-16T21:08:03.380 に答える
0

クリックの通常の動作を防ぐ必要があると思います。

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

ただ推測します。

于 2010-11-16T20:51:53.370 に答える
0

おそらくページの一番下までスクロールしているだけです。ページが終了しているため、divの上部をページの上部に揃えることはできません。ページの下部（または何か）にたくさんの空のスペースを追加してみて、<div style='height: 1000px;"></div>それでも予期しない動作が発生するかどうかを確認してください。

于 2010-11-16T20:48:21.750 に答える