2

私はメニュー構造を持っています:

<ul id="creamenu" class="menuHolder">
                    <li><a id="news-1-menu" href="#/creative-events">news 1</a></li>
                    <li><a id="news-2-menu" href="#/creative-ajans">news 2</a></li>
                    <li><a id="news-3-menu" href="#/incentive-travel">news 3</a></li>
                </ul>
                <ul id="mainmenu" class="menuHolder">
                    <li><a id="about1-menu" href="#/hakkimizda">about 1</a></li>
                    <li><a id="about2-menu" href="#/haberler">about 2</a></li>
                    <li><a id="about3-menu" href="#/galeri">about 3</a></li>
                    <li><a id="about4-menu" href="#/referanslar">about 4</a></li>
                    <li><a id="about5-menu" href="#/iletisim">about 5</a></li>
</ul>

同じ HTML ファイルにコンテンツ構造があります。

    <div id='news-1'>
        <!-- content -->
        <!-- content -->
</div>

    <div id='news-2'>
        <!-- content -->
        <!-- content -->
</div>

クリームメニューアイテムなどのアイテムをクリックすると、divに移動します。例えば

news-1 項目をクリックし、news-1 div に移動します。このように: http://codecanyon.net/item/fancyscroll/full_screen_preview/370241

純粋なjQueryでそれは可能ですか?

4

4 に答える 4

1

それは絶対に可能です。これを試して：

$('#creamenu a').click(function(e) {
    var splitId = $(this).attr('id').split('-'),
        contentId = splitId[0] + '-' + splitId[1];

    e.preventDefault();

    $('html, body').animate({
      scrollTop: $('#' + contentId).offset().top
    }, 'slow');
});

この特定のアプローチを使用すると、#creamenu 内のリンクの ID の前に、対応するコンテンツの ID が付けられていることを確認する必要があります (現在行っているように)。

また、コンテンツの ID を #creamenu リンクの href に入れるだけでもより堅牢になります。そうすれば、ユーザーが JS をアクティブにしていない場合でも、アニメーションはなくてもコンテンツにジャンプします。例えば：

<li><a id="news-1-menu" href="#news-1">news 1</a></li>

次に、JS は次のようになります。

$('#creamenu a').click(function(e) {
    e.preventDefault();

    $('html, body').animate({
      scrollTop: $($(this).attr('href')).offset().top
    }, 'slow');
});
于 2013-01-18T15:07:55.133 に答える
0

はい、href属性を要素の ID に変更するだけです。

<li><a id="news-1-menu" href="#news-1">news 1</a></li>

スムーズにスクロールするには、次を試してください。

$('a[href^=#]').on('click',function(e) {
  e.preventDefault();
  var id = $(this).attr('href'),
      top = $(id).offset().top;
  $('html,body').animate({'scrollTop':top}, function() {
    window.location = id;
  });
});
于 2013-01-18T15:00:51.643 に答える
0 
<li><a id="news-1-menu" href="#news-1">news 1</a></li>

With the id as href the page just jumps to the target box. Use a plugin like scrollTo to make it scroll smooth.

于 2013-01-18T15:01:24.310 に答える
0

可能ですが、コードに若干の変更が必要です。

$('#creamenu li a').click(function(event){
   event.preventDefault();
   $position = $( $(this).attr('href') ).offset().top;
   $('html, body').animate({scrollTop:$position}, 'fast');
});

また、リンク構造を変更して、href がスクロール先の要素の id になるようにします。

リンクを次のようにすることもできます。

<li><a id="news-1-menu" href="#/creative-events" rel="#news-1">news 1</a></li>

rel 属性を使用して要素を見つけます。スクロールしたい場所:

$('#creamenu li a').click(function(event){
       event.preventDefault();
       $position = $( $(this).attr('rel') ).offset().top;
       $('html, body').animate({scrollTop:$position}, 'fast');
});

また、視差効果をお探しの場合: http://jessandruss.us/、こちらのチュートリアルをご覧ください: http://www.ianlunn.co.uk/blog/code-tutorials/jquery-vertical-parallax-background/またはここ: http://www.ianlunn.co.uk/demos/recreate-nikebetterworld-parallax/

于 2013-01-18T15:02:28.733 に答える