0

jquery scrollTo プラグインによって駆動される 1 ページの Web サイトがありますが、これは私の場合は問題ではないと思います。問題は1ページのデザインにあるようです。タブをクリックすると、フォーカスできるものにタブがジャンプするため、デザイン全体が台無しになります。これには、現在のビューポート領域の外にある場所が含まれます。
実際、最初のフォーム フィールドをクリックした後、#contactForm div 以外にタブをフォーカスさせたくありません。タブはそれにフォーカスできますが、ハッシュ "#contact" がビューポート内にある場合のみです。そのようなことを実現する方法はありますか、それとも、ビューポート領域外のコンテンツを扱っている 1 ページのデザインが常にタブ/フォーカスによって台無しにされますか?

たぶん、いくつかのアイデアがその問題をもう少しよく理解するのに役立つかもしれません

4

1 に答える 1

1

あなたの HTML がどのようなものか分からないので、ScrollTo のデモを借りました。パネル内にフォーカスがあるリンクを作成して、パネルを強制的に表示させることができます ( demo ):

このようなもの：

$('#pane-target li a').bind('focusin', function() {
    $('#pane-target').scrollTo( $(this).closest('li'), 800, {queue: true} );
})

バインドと [戻る] ボタンのクリックの間の競合を削除するようにデモを更新しました。

更新:提供したリンクから HTML/スクリプトで動作するようにデモを変更しました。リンクが競合しないように、かなり変更する必要がありました。また、.selected最初のパネルのみのリンクではなく、クラスをアイテムに移動しました。うまくいけば、すべてを明確にするのに十分なコメントを追加しました。

 $('a').bind('focusin click', function(e){

  // focusin occurs before click
  if (e.type == 'click') {

   var tar = $(this).attr('href');

   if ($(this).is('.panel')) {
    // clicked on a.panel; scroll to destination
    $('#wrapper').scrollTo(tar, 800);
    //reset and highlight the clicked link
    $('.item').removeClass('selected');
    $(tar).addClass('selected');
    //cancel the link default behavior
    return false;
   } else {
    // clicked on link (not '.panel'), return true in case it's an external link
    return true;
   }

  } else {
   // link was focused 
   var time, item = $(this).closest('.item');
    if (item.is('.selected')){
     // if item is already in view (position it immediately)
     time = 0;
    } else {
     // item is not in view, so smoothly scroll & update classes
     time = 800;
     $('.item').removeClass('selected');
     item.addClass('selected');
    }
   $('#wrapper').scrollTo(item, time);
  }

 });
于 2010-10-16T13:09:52.440 に答える