Question

我正在使用一个名为“$.scrollTo”的小型库来动画滚动到我的html中的div元素。在我的页面顶部，我有一个固定的导航栏。在动画结束时，我想将该div专注于（可访问性）。如果我的div很大，那么在动画结束时，它会得到焦点 - 只需将它从屏幕上移开一点。

小div不会发生这种情况。

这是我的代码（请查看下面的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搞砸了，但我想要动画和焦点。关于如何实现对大型div的关注而不让它改变滚动条的任何想法？建议非常欢迎。

Answer 1

试试这个。

  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禁用焦点蓝色突出显示。

Javascript专注于固定标题的大型div

1 个答案: