使用 jQueryscrollTop 时消除抖动

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/yijian/SceDY/1/

---

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

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;
});