javascript - 在 div 文本上垂直滚动

标签 javascript jquery html css

目前我的 div 使用两个按钮(向上和向下)滚动,但我希望它跳到顶部并跳到底部,这两个按钮具有垂直自动滚动(向下)。我如何在 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;
}​

最佳答案

让我们看看这里。 http://jsfiddle.net/NkY8J/2/

只需设置 ele.scrollTop(0); 即可跳转到顶部。

并设置 ele.scrollTop(Math.pow(10,9)); 跳到底部。

关于javascript - 在 div 文本上垂直滚动,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/13225351/

相关文章:

javascript - 我想在 iframe 关闭后重新加载页面 bt 它在加载时重新加载?

javascript - 比较对象数组。返回匹配的对象键和值

javascript - angularjs 应用程序中的 HTML 5 url

jQuery - 获取 id 与搜索字符串不同的元素

html - 如何将滚动框编码到图像上?

javascript - 在不清除屏幕的情况下显示javascript变量

javascript - JQuery .find() 多个数组的函数

javascript - 来自 PHP mySQL 查询的 jQuery 自动完成

javascript - 如何向下滑动整个 div,但在滑动时使其内容保持不变?

html - 对齐表中的数据