Hello to every one.
This supposed to be simple, but I don’t really know jQuery in order to implement this the proper way.
All I want is to create a div with some text inside. The div will be overflowed some text will be visible.
So all I want to do is to create to small links “up” and “down” so when the visitor clicks on then the text scrolls up or down. like this effect here
http://www.dynamicdrive.com/dynamicindex11/scrollc2.htm
I tried to do some search … but all I find are plugins and scrollers to create carousels or so…
This supposed to be easy, but I am missing something…
Thanks in advance
jQuery has a built in method called .scrollTop() which uses a numeric value to scroll an element to a specific point. Eg here is something i wrote quickly
<!DOCTYPE html>
<html>
<head>
<script type="text/javascript" src="http://code.jquery.com/jquery-1.4.4.min.js"></script>
<script type="text/javascript">
$(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;
}
}
});
});
</script>
<style type="text/css">
<!--
div#scroll {
width: 200px;
height: 200px;
overflow: hidden;
padding: 4px;
margin-bottom: 20px;
}
-->
</style>
</head>
<body>
<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>
<a href="#" id="scroll-down">Down</a> - <a href="#" id="scroll-up">Up</a>
</body>
</html>
1 Like
It works fine… Thank you very much for your help. Hope some other people find this one usefull
No problem, was a fun little snippet to write