将窗口水平滚动到设备和桌面中的元素

Question

我有一个水平滚动的网站，因为页面比视口更宽。 我还有一个固定的菜单，当用户单击菜单中的链接时，窗口应滚动到特定的元素，如下面的代码。

这在台式机上工作正常，但在设备中，左值不相同，因此不会滚动到所需位置。如何计算左右值，使其适用于所有设备？

$('.link').bind('click', function () {
 window.scrollTo({
    top: null,
    left: 2600,
    behavior: 'smooth'
  });
});

Answer 1

您可以通过获取目标元素的offset().left来计算要动态滚动的值。

还请注意，bind()很久以前已被弃用，您不应该使用它。请改用click()或on()。我还建议检查您使用的jQuery版本。如果版本早于1.12.1，则应进行升级。

以下是上述所有示例：

$('.link').on('click', function () {
  window.scrollTo({
    left: $('#yourTargetElement').offset().left,
    behavior: 'smooth'
  });
});