Javascript與一個固定的標頭聚焦一個大的div

我正在使用一個名爲'$.scrollTo'的小型庫來爲我的html中的一個div元素動畫滾動。在我的頁面頂部我有一個固定的導航欄。在動畫結束時，我想讓div專注（爲了可訪問性）。如果我的div大，在動畫結束時，焦點的事實 - 只是簡單地將它發送到屏幕上。Javascript與一個固定的標頭聚焦一個大的div

這不會發生與小divs。

這裏是我的代碼（檢查的jsfiddle下）：

$('#buttonid').on("click", function() { 

//fixed nav bar height (to compensate when scrolling) 
var fixed_navbar_height = $("#navbar-id").height(); 

//the element to scroll to 
var $go_to_selector = $("#topic2"); 

$.scrollTo($go_to_selector, { 
    duration: 1000, 
    offset: -fixed_navbar_height, 
    onAfter: function() { 
    //if you comment out this .focus it works as intended. 
    $go_to_selector.focus(); 
    } 
}); 
});

這裏是一個的jsfiddle例如： https://jsfiddle.net/dy35obpq/3/

顯然onAfter打亂它，但我想無論是動畫和焦點。任何想法如何實現一個大的股利而不讓它更改滾動條專注？建議是非常值得歡迎的。

來源

2016-09-26 ponyboil

當你說這將是'斷screen'，你是什麼意思？ – phreakv6

焦點，把div放在我的屏幕頂部 - 就在它忽略的固定標題下。檢查的jsfiddle，和評論的重點線，看看它如何工作 – ponyboil

在沒有的jsfiddle滾動在所有對我來說... – Danmoreng

試試這個。

onAfter: function() { 
    $go_to_selector.focus(); 
    $(window).scrollTop($($go_to_selector).offset().top - fixed_navbar_height); 
    }

我只是在onAfter回調中添加了這一行。 $(window).scrollTop($($go_to_selector).offset().top - fixed_navbar_height);

，它似乎已經解決了這一問題，同時仍保留焦點。您可能想使用CSS來禁用焦點藍色突出顯示。

來源

2016-09-26 15:43:54 phreakv6

這確實似乎是解決這一問題。謝謝。 – ponyboil

Javascript與一個固定的標頭聚焦一個大的div

回答

相關問題