2016-05-23 8 views
1

私は2つの列にウェブサイトを作った。左側にはすべてのリンクがあり、反対側にはコンテンツがあります。あなたがリンクをクリックすると、コンテンツは上がり、リンクもそれ自身を整列させます。
You can test it here

私は、左側の一番下に特殊な方法で文書の上部にスクロールできるボタンを実装する方法を探しています:
ilは、最初のリンクを有効にしますそれにスクロールする)、同時に、右側の特派員の記事を整列させる。今のところ、このリンクを除いて、アライメントシステムが動作しています。コードを参照してください。あなただけのメニューから最上位のリンクをクリックイベント(「フォワード」)、そのボタンやトリガーにクリックハンドラを添付することができリンクをスクロールして有効にしてください

$('.cd-top').bind('click', function(e) { 
     e.preventDefault(); 

     var $container = $('.menu-content:first'), 
     $desc = $('.menu-content:first'); 

      $desc.slideDown('100', function() { 
       $("#scrollingaside").scrollTo($container, 500, {offset: { top:-1 } });// la hauteur d'alignement c'est ici ! 
       $("#scrollingontheright").scrollTo($("#" + $container.attr('data-id')), 1500); 
      }); 
     } 
    }); 
    $('.article').bind('click', function() { 
     var idproj = $(this).find('span:first').attr('id'); 
     $('.menu-content[data-id="' + idproj + '"]').find('.cd-top').trigger('click'); 
    }); 
+0

リンク – Yagayente

答えて

2

//代わりに、バインドのフィドルの

$('.expander').on('click', function(e) { 
    e.preventDefault(); 

    var $container = $(this).parents('.menu-content:first'), 
    $desc = $(this).parents('.menu-content'); 
// newly added 
    $('.expander').parents(".current").removeClass('current'); 
    if($container.hasClass('current') == false) { 

     var others = $('.current'); 
     $container.addClass('current'); 

     $desc.slideDown('100', function() { 
      $("#scrollingaside").scrollTo($container, 500, {offset: { top:-1 } });// la hauteur d'alignement c'est ici ! 
      $("#scrollingontheright").scrollTo($("#" + $container.attr('data-id')), 1500); 
     }); 
    } 
}); 
$('.article').bind('click', function() { 
    var idproj = $(this).find('span:first').attr('id'); 
    $('.menu-content[data-id="' + idproj + '"]').find('.expander').trigger('click'); 
}); 
**// new code** 
$(".cd-top").on("click",function(){ 
$('.expander:first').trigger("click"); 
}); 
+0

そのリンクを一度クリックするだけで動作するようです。 2回クリックすると、ボタンはアクティブではないようです。ここを見てください= https://jsfiddle.net/yagayente/rjw5r7qL/2/何か考えていますか? – Yagayente

+0

$(this).parents( "。現在")。removeClass( 'current');私はこのラインチェックを追加しました。今すぐ動作するはずです 注:リンクも2度目のクリックでは機能していません。 – sarath

+0

Ok。ほぼそこに! :)スクロール作業は今...しかし、リンクの変更時に離れる代わりにクリックされたすべてのリンクに現在のクラスが残っているようです。その問題をここに見てください:https://jsfiddle.net/yagayente/tkvtr2e3/2/ - 私は ".current"のためのCSSを作りました。 – Yagayente

0



$('#top').click(function() { 
    $('.menu a')[0].click() 
    }) 

セレクタ」.menu a 'は、正しいリンクをターゲットにするために変更する必要があります。

+0

は、それが動作することに成功し、まだ.. https://jsfiddle.net/yagayente/rjw5r7qL/なかった修正されました()で使用1/ – Yagayente

+0

Humm。働いていない。または、それに対処する方法を知らない。誰でも ? – Yagayente

関連する問題