focus is causing problems on 1page website design

Question

I have a 1page website that is driven by jquery scrollTo plugin which, I guess, doesn´t matter in my case. The problem seems to be the 1page design. If I click the tab, the entire design is messing up because the tab jumps to whatever it can find to focus on. That includes places that are outside of the current viewport area.
Actually I don´t want the tab to focus on anything except from my #contactForm div after you clicked into the first form field. The tab could focus on that but only if the hash "#contact" is within the viewport. Is there any way to realize something like that or does the tab/focus thing always mess up 1 page designs that are dealing with content outside of the viewport area?

Maybe some ideas can help me to understand that issue a little better

Answer 1

Since I don't know what your HTML looks like, I borrowed the ScrollTo demo. You can try making a link that has focus inside the panel force the panel into view (demo):

Something like this:

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

Updated demo to remove conflict between bind and click on the back button.

---

Update: Changed demo to work with HTML/Script from the link you provided. I had to modify it quite a bit so the links wouldn't conflict. Also, I moved the .selected class to the item instead of the link in the first panel only. Hopefully I added enough comments to make it all clear.

 $('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);
  }

 });