Question

我有一个包含溢出的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;
            }
        }
    });
});

Answer 1

使用您当前的代码应该很容易，您所要做的就是摆脱间隔以阻止它反复滚动。那么您也不需要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();
    }
  });

});

使用jQuery scrollTop按一定量的像素向上和向下滚动

1 个答案: