重點是在1page網站設計上造成問題

Question

我有一個由jquery scrollTo插件驅動的1頁網站，我猜這對我而言並不重要。這個問題似乎是第1頁的設計。如果我點擊這個標籤，整個設計就會變得混亂起來，因爲這個標籤跳轉到了它能找到的任何焦點上。這包括當前視口區域之外的地方。
實際上，我不希望標籤專注於單擊第一個表單字段後從我的#contactForm div除外的任何內容。該選項卡可以專注於該選項卡，但前提是散列「#contact」位於視口內。有沒有什麼辦法可以實現這樣的事情呢，還是標籤/焦點的東西總是弄亂了處理視口區域之外的內容的1頁設計？

也許有些想法可以幫助我理解這個問題更好一點

Answer 1

因爲我不知道你的HTML是什麼樣子，我借了ScrollTo演示。您可以嘗試製造具有面板集中的面板力內部劃分爲視圖（demo）鏈接：

事情是這樣的：

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

更新演示綁定之間消除衝突，然後單擊後退按鈕。

---

更新： 改變demo從您提供的鏈接與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); 
    } 

});