使用 jQuery scrollTop 时消除抖动

Question

我有一个功能，当按下键盘上的向下箭头时向下滚动到文章的下一部分，当按下向上箭头时向上滚动。它工作正常，但是在滚动之前会有轻微的“反弹”或“抖动”。

我可以通过让函数返回 false 来部分解决这个问题，但是，返回 false 会吞下按键事件，导致我无法使用键盘与浏览器交互。

关于如何在释放键盘的同时消除“抖动”的任何想法？

var $sections = $('.section');
var curr = -1;

$(document).keydown(function(e){
  prev = (curr < 0)? $sections.length-1: curr-1;
  next = (curr >= $sections.length-1)? -1: curr+1 ;

  switch (e.keyCode) {
    case 38:  // up key
      s = $sections.eq(prev).offset().top;
      curr = prev;
      break;
    case 40:  // down key
      s = $sections.eq(next).offset().top;
      curr = next;
      break;
    default:
      break;
  } 

  if (curr == -1 ){
    $('html, body').animate({scrollTop: 0}, 'slow');
  }
  else{
    $('html, body').animate({scrollTop: s}, 'slow');
  }
  return e;
});

Answer 1

大概你可以简单地添加一个简单的if 语句，它只会在keyCode 上下匹配时执行滚动代码：

$(document).keydown(function(e) {
    if (e.keyCode === 38 || e.keyCode === 40) {
        // Your code
        return false;
    }
});

这里有一个简单的演示：http://jsfiddle.net/yijiang/SceDY/1/

---

查看代码，您可能还应该使用var 关键字来限制变量prev、next 和s 的范围。如果按下 up 和 down 以外的任何其他内容，当前代码的行为就会不稳定。

Answer 2

谢谢 Yi...作为替代方案...我只是通过将默认 switch case 设置为返回 e 来使其工作。然后函数底部的return返回false。

结果如下所示：

var $sections = $('.section');
var curr = -1;

$(document).keydown(function(e){
  prev = (curr < 0)? $sections.length-1: curr-1;
  next = (curr >= $sections.length-1)? -1: curr+1 ;

  switch (e.keyCode) {
    case 38:  // up key
      s = $sections.eq(prev).offset().top;
      curr = prev;
      break;
    case 40:  // down key
      s = $sections.eq(next).offset().top;
      curr = next;
      break;
    default:
      return e;
  } 

  if (curr == -1 ){
    $('html, body').animate({scrollTop: 0}, 'slow');
  }
  else{
    $('html, body').animate({scrollTop: s}, 'slow');
  }
  return false;
});