7

我有一个溢出的 div 中的链接列表。我想要发生的是用户可以使用向上和向下按钮在此链接菜单中导航。每次用户单击相应的按钮时，我希望 div 向上或向下滚动 1 个链接元素的高度。我尝试了一些代码，但我似乎无法弄清楚如何让它在两个方向上滚动正确的数量。谁能帮我吗？

所有链接都具有相同的类。

编辑：

我已经设法上下滚动。现在我只需要以 1 个链接高度的小步长滚动。

$(function() {
var ele   = $('#scroller');
var speed = 10, scroll = 5, scrolling;

$('.scroller-btn-up').click(function() {
    // Scroll the element up
    scrolling = window.setInterval(function() {
        ele.scrollTop( ele.scrollTop() - scroll );
    }, speed);
});

$('.scroller-btn-down').click(function() {
    // Scroll the element down
    scrolling = window.setInterval(function() {
        ele.scrollTop( ele.scrollTop() + scroll );
    }, speed);
});

$('.scroller-btn-up, .scroller-btn-down').bind({
    click: function(e) {
        // Prevent the default click action
        e.preventDefault();
    },
    mouseleave: function() {
        if (scrolling) {
            window.clearInterval(scrolling);
            scrolling = false;
            }
        }
    });
});
4

1 回答 1

4

使用您当前的代码应该很容易，您所要做的就是摆脱间隔以阻止它重复滚动。然后您也不需要该mouseleave功能，您可以将滚动变量设置为与链接标签的高度相同的值，例如20对于20px高链接标签：

$(function() {

  var ele = $('#scroller');
  var scroll = 20;

  $('.scroller-btn-up').click(function() {
    // Scroll the element up    
    ele.scrollTop(ele.scrollTop() - scroll);
  });

  $('.scroller-btn-down').click(function() {
    // Scroll the element down
    ele.scrollTop(ele.scrollTop() + scroll);
  });

  $('.scroller-btn-up, .scroller-btn-down').bind({
    click: function(e) {
      // Prevent the default click action
      e.preventDefault();
    }
  });

});
于 2013-05-10T08:57:17.167 回答