Scroll the text up using JQuery

Here is the complete code:

>
<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>
head>
<body>
<div id="scroll">
Content here and more content here
Content here and more content here
Content here and more content here
Content here and more content here
Content here and more content here
Content here and more content here
Content here and more content here
Content here and more content here
Content here and more content here
Content here and more content here
Content here and more content here
Content here and more content here
Content here and more content here
Content here and more content here
div>
<a href="#" id="scroll-down">Downa> - <a href="#" id="scroll-up">Upa>
body>
html>

2 Replies

Know the answer? Post it — somebody with the same question will find it here.

Anil Reddy10y ago
Rajasekar,

Use this code with div class or id:
   $('#divId').scrollTop(0);
   or
    $('.divClass').scrollTop(0);
Manas Mohapatra10y ago
Here is the complete code:
>
<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>
head>
<body>

<div id="scroll">
 Content here and more content here 
 Content here and more content here 
 Content here and more content here 
 Content here and more content here 
 Content here and more content here 
 Content here and more content here 
 Content here and more content here 
 Content here and more content here 
 Content here and more content here 
 Content here and more content here 
 Content here and more content here 
 Content here and more content here 
 Content here and more content here 
 Content here and more content here
div>

<a href="#" id="scroll-down">Downa> - <a href="#" id="scroll-up">Upa>

body>
html>