如何使用 jQuery 设置滚动位置？答案

【问题标题】：How to set scroll position with jQuery?如何使用 jQuery 设置滚动位置？
【发布时间】：2017-07-04 19:56:54
【问题描述】：

我找到了解决我遇到的类似问题的方法HERE. 但是我无法让它为自己工作。我遇到的问题是在我正在处理的网站上打开移动菜单时尝试锁定垂直滚动。锁定滚动会导致每次打开菜单时页面都会跳到顶部。

jQuery:

timber.openDrawerMenu = function () {
    var tempScrollTop = $(window).scrollTop();
    var $mobileMenu = $('.nav-bar'),
    $mobileMenuButton = $('#menu-opener'),
    $body = $('body');
    $mobileMenuButton.addClass('opened');
    $mobileMenu.addClass('opened');
    $body.addClass('opened-drawer');

  // Make drawer a11y accessible
  timber.cache.$navBar.attr('aria-hidden', 'false');

  // Set focus on drawer
  timber.trapFocus({
     $container: timber.cache.$navBar,
     namespace: 'drawer_focus'
  });

  // Escape key closes menu
  timber.cache.$html.on('keyup.drawerMenu', function(evt) {
    if (evt.keyCode == 27) {
      timber.closeDrawerMenu();
    }
  });
  console.log(tempScrollTop);
  $(window).scrollTop(tempScrollTop);
}

我添加了console.log() 语句，以查看脚本是否捕获了正确的scrollTop 值，事实上确实如此。出于某种原因，它没有设置滚动位置，我无法弄清楚究竟是为什么。非常感谢这里的任何帮助。

【问题讨论】：

使用 setTimeout(x,0) 等待 dom 刷新，让浏览器有时间在阅读前滚动。添加类，稍等片刻，然后执行滚动代码，否则一目了然。
@dandavis 我将在哪里使用该代码？但它测量正确，只是在点击事件后实际上并没有设置滚动位置。
我真的不明白你想用 jQuery 完成什么。
@LucasMedina 我正在尝试计算，然后在菜单展开时设置 scrollTop 位置。这样，它可以抵消我在菜单展开（打开）时页面跳转到顶部的问题。所以我使用var tempScrollTop = $(window).scrollTop(); 来计算它并使用console.log(tempScrollTop); $(window).scrollTop(tempScrollTop); 来设置它。但是，打开菜单时页面仍然跳到顶部，但在控制台中显示正确的滚动位置。
位置：固定是一个问题，因为它会相对于视口定位主体。没有它，这应该（理论上）工作，因为你已经设置了溢出：隐藏并以编程方式滚动到正确的位置。

标签： javascript jquery html css

【解决方案1】：

我发现这是一个特定于移动设备的问题。

对此我有 1 个想法：
- 尝试在 body 标记上显式设置 position: relative。
如果这不起作用，我有一个更老套的想法：
- 尝试在关闭菜单之前明确重置滚动位置。

希望这些有用，如果没有，请发表评论:)

【讨论】：

如何使用在另一个函数中定义的变量设置 scrollTop 位置？
方法有很多。从我的头顶上掉下来..您可以将其存储在木材或菜单对象上。您还可以将其存储在元素本身的数据变量中。您还可以将变量绑定到回调函数。