javascript - Jquery 滚动到焦点元素

Question

我已经搜索了大约一个小时的答案，但找不到任何正确的答案。

我有一个带有图标的水平时间轴，我已经为每个图标添加了 tabindex，这样您就可以在时间轴/图标之间切换(它们使用简单的 :hover 和 :focus css 突出显示)。

我想添加一些 jquery 以确保页面滚动到当前聚焦的图标，理想情况下将其定位在靠近用户屏幕中心(水平)的某个位置，并且理想情况下具有某种平滑滚动...

我看过 scrollTo 但找不到任何可以满足我需要的示例。

请帮忙!

谢谢:)

Answer 1

我猜你指的是这个插件:https://github.com/flesler/jquery.scrollTo

在这种情况下，您需要执行以下操作:

$('.icon').on('focus', function(){
 $.scrollTo($(this), duration, settings )
})

duration是动画的时长

在设置中，您需要添加偏移量，以便焦点元素位于视口(viewport)中您想要的位置