La mise au point cause des problèmes sur la conception d'un site Web 1page

Question

J'ai un site Web d'une page qui est piloté par le plugin jquery scrollTo qui, je suppose, n'a pas d'importance dans mon cas. Le problème semble être la conception 1page. Si je clique sur l'onglet, le design entier est en train de gâcher parce que l'onglet saute à tout ce qu'il peut trouver sur lequel se concentrer. Cela inclut les espaces situés en dehors de la zone de la fenêtre courante.
En fait, je ne veux pas que l'onglet se concentre sur autre chose que sur mon div #contactForm après avoir cliqué sur le premier champ de formulaire. L'onglet pourrait se concentrer sur cela, mais seulement si le hash "#contact" est dans la fenêtre. Y a-t-il un moyen de réaliser quelque chose comme ça ou est-ce que l'onglet/focus est toujours en train de gâcher des conceptions de 1 page qui traitent du contenu en dehors de la zone de la fenêtre d'affichage?

Peut-être que quelques idées peuvent me aider à comprendre cette question un peu mieux

Answer 1

Comme je ne sais pas ce que votre HTML ressemble, j'ai emprunté la démo ScrollTo. Vous pouvez essayer de faire un lien qui a le focus dans la force du panneau du panneau en vue (demo):

Quelque chose comme ceci:

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

Mise à jour démo pour éliminer les conflits entre les lier et cliquez sur le bouton de retour.

---

Mise à jour: Changé demo travailler avec HTML/script à partir du lien fourni. J'ai dû le modifier un peu pour que les liens ne soient pas en conflit. En outre, j'ai déplacé la classe .selected à l'élément au lieu du lien dans le premier panneau uniquement. J'espère avoir ajouté suffisamment de commentaires pour que tout soit clair.

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

});