фокус вызывает проблемы на дизайне сайта 1 страницы

Question

У меня есть сайт 1 страницы, который управляется jQuery scrollTo плагином, который, я думаю, не имеет значения в моем случае. Кажется, что проблема заключается в дизайне 1 страницы. Если я нажму на вкладку, весь дизайн будет испорчен, потому что вкладка переходит к тому, что может найти, чтобы сосредоточиться. Это включает в себя места, которые находятся за пределами области просмотра.
На самом деле я не хочу, чтобы вкладка фокусировалась на чем-либо, кроме моего div #contactForm после того, как вы нажали в поле первой формы. Вкладка могла бы сфокусироваться на этом, но только если хеш «#contact» находится внутри области просмотра. Есть ли способ реализовать что-то подобное, или вещь tab/focus всегда испортит 1-страничный дизайн, который имеет дело с контентом за пределами области просмотра?

Может быть, некоторые идеи могут помочь мне понять, что этот вопрос немного лучше

Answer 1

Поскольку я не знаю, что ваш HTML выглядит, я позаимствовал демо ScrollTo. Вы можете попробовать сделать ссылку, которая имеет фокус внутри панели силы панели в поле зрения (demo):

Что-то вроде этого:

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

Изменено демки, чтобы удалить конфликт между затруднительным и нажмите на кнопку назад.

---

Update: Изменено demo работать с HTML/Script по ссылке вы предоставили. Мне пришлось немного изменить его, чтобы ссылки не конфликтуют. Кроме того, я переместил класс .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); 
    } 

});