[英]Vertical scroll on div text
目前我的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));
跳到最低点。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.