3

現在、私の div は 2 つのボタン (上と下) を使用してスクロールしていますが、代わりに垂直方向の自動スクロール (下向き) が行われている 2 つのボタンを使用して、上にジャンプして下にジャンプしたいと考えています。jQueryでこれを達成するにはどうすればよいですか? これまでの私のコードは次のとおりです: http://jsfiddle.net/NkY8J/。

HTML

    <div id="scroll">
         Content here and more content here<br /><br />
    Content here and more content here<br /><br />
    Content here and more content here<br /><br />
    Content here and more content here<br /><br />
    Content here and more content here<br /><br />
    Content here and more content here<br /><br />
    Content here and more content here<br /><br />
    Content here and more content here<br /><br />
    Content here and more content here<br /><br />
    Content here and more content here<br /><br />
    Content here and more content here<br /><br />
    Content here and more content here<br /><br />
    Content here and more content here<br /><br />
    Content here and more content here
      </div>
              <input id="scroll-up" class="btn" type="button" value="Up"/>
              <input id="scroll-down" class="btn" type="button" value="Down"/>
​

JS

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

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

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

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

CSS

#scroll {
    width: 200px;
    height: 100px;
    overflow: hidden;
    padding: 4px;
}​
4

1 に答える 1

1

ここで見てみましょう。http://jsfiddle.net/NkY8J/2/

ele.scrollTop(0);トップにジャンプするように設定するだけです。

そしてele.scrollTop(Math.pow(10,9));、一番下にジャンプするように設定します。

于 2012-11-05T03:19:36.080 に答える