Control scroll speed using JQuery

DrRakha

control the speed of scrolling your web page when use click on top link, here we scroll to top of page and middle section with jQuery

javascript code

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 
Transitional//EN" "http://www.w3
.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
<title>slow scroll up- smooth scrolling</title>
 
<!--
 <script 
 src="//ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js">
</script>
 Note you can download the 
 JQuery package instead of using Google version. --> 
<script src="jquery-1.8.3.js"></script>
<script>
 $(document).ready(function(){
  
   
  $('#Footer').bind('click', function() {
    alert('You should click the top button to go up');
   });
   // slow scroll to a specific target in the web page.
  $('a[href^="#"]').bind('click.smoothscroll',function (e) {
    e.preventDefault();
  
    var hashValue = this.hash;
 
    var    $goToTagPoint = $(hashValue);
      // You can change the delay parameter
    $('html, body').stop().animate({
	// Stop it find HTML Tag or BODY tag
        'scrollTop': $goToTagPoint.offset().top
    }, 2000, 'swing', function () {
        window.location.hash = hashValue;
    });

});
 }); 
</script>
  
</head>
<body>
<div id="GoHead" style="background:#0414F4;color:yellow;width='100';"
 width="200">This is the header</div> 
 
 
<a href="http://www.codemiles.com" target="_blank" >Link1</a>
<a href="#" >Link2</a>
<a href="#" >Link3</a>
<a href="#" >Link4</a>
<p><i>Scroll Down until You Found "Go-Head or Go-Middle" Link</i></p>
<p><i>Scroll Down until You Found "Go-Head or Go-Middle" Link</i></p>
<p><i>Scroll Down until You Found "Go-Head or Go-Middle" Link</i></p>
<p><i>Scroll Down until You Found "Go-Head or Go-Middle" Link</i></p>
<p><i>Scroll Down until You Found "Go-Head or Go-Middle" Link</i></p>
<p><i>Scroll Down until You Found "Go-Head or Go-Middle" Link</i></p>
<p><i>Scroll Down until You Found "Go-Head or Go-Middle" Link</i></p>
<p><i>Scroll Down until You Found "Go-Head or Go-Middle" Link</i></p>
<p><i>Scroll Down until You Found "Go-Head or Go-Middle" Link</i></p>
<p><i>Scroll Down until You Found "Go-Head or Go-Middle" Link</i></p>
<p><i>Scroll Down until You Found "Go-Head or Go-Middle" Link</i></p>
<p><i>Scroll Down until You Found "Go-Head or Go-Middle" Link</i></p>
<p><i>Scroll Down until You Found "Go-Head or Go-Middle" Link</i></p>
<p><i>Scroll Down until You Found "Go-Head or Go-Middle" Link</i></p>
<p><i>Scroll Down until You Found "Go-Head or Go-Middle" Link</i></p>
<p><i>Scroll Down until You Found "Go-Head or Go-Middle" Link</i></p>
<p><i>Scroll Down until You Found "Go-Head or Go-Middle" Link</i></p>
<p><i>Scroll Down until You Found "Go-Head or Go-Middle" Link</i></p>
<div id="GoMiddle" style="background:#0414F4;color:yellow;width='100';"
 width="200">This is the middle</div> 
<p><i>Scroll Down until You Found "Go-Head or Go-Middle" Link</i></p>
<p><i>Scroll Down until You Found "Go-Head or Go-Middle" Link</i></p>
<p><i>Scroll Down until You Found "Go-Head or Go-Middle" Link</i></p>
<p><i>Scroll Down until You Found "Go-Head or Go-Middle" Link</i></p>
<p><i>Scroll Down until You Found "Go-Head or Go-Middle" Link</i></p>
<p><i>Scroll Down until You Found "Go-Head or Go-Middle" Link</i></p>
<p><i>Scroll Down until You Found "Go-Head or Go-Middle" Link</i></p>
<p><i>Scroll Down until You Found "Go-Head or Go-Middle" Link</i></p>
<p><i>Scroll Down until You Found "Go-Head or Go-Middle" Link</i></p>
<p><i>Scroll Down until You Found "Go-Head or Go-Middle" Link</i></p>
<p><i>Scroll Down until You Found "Go-Head or Go-Middle" Link</i></p>
<p><i>Scroll Down until You Found "Go-Head or Go-Middle" Link</i></p>
<p><i>Scroll Down until You Found "Go-Head or Go-Middle" Link</i></p>
<p><i>Scroll Down until You Found "Go-Head or Go-Middle" Link</i></p>
<p><i>Scroll Down until You Found "Go-Head or Go-Middle" Link</i></p>
<p><i>Scroll Down until You Found "Go-Head or Go-Middle" Link</i></p>
<p><i>Scroll Down until You Found "Go-Head or Go-Middle" Link</i></p>
<p><i>Scroll Down until You Found "Go-Head or Go-Middle" Link</i></p>
<p><i>Scroll Down until You Found "Go-Head or Go-Middle" Link</i></p>
<p><i>Scroll Down until You Found "Go-Head or Go-Middle" Link</i></p>
<p><i>Scroll Down until You Found "Go-Head or Go-Middle" Link</i></p>
<p><i>Scroll Down until You Found "Go-Head or Go-Middle" Link</i></p>
<p><i>Scroll Down until You Found "Go-Head or Go-Middle" Link</i></p>
<p><i>Scroll Down until You Found "Go-Head or Go-Middle" Link</i></p>
<p><i>Scroll Down until You Found "Go-Head or Go-Middle" Link</i></p>
<p><i>Scroll Down until You Found "Go-Head or Go-Middle" Link</i></p>
<p><i>Scroll Down until You Found "Go-Head or Go-Middle" Link</i></p>
<p><i>Scroll Down until You Found "Go-Head or Go-Middle" Link</i></p>
<p><i>Scroll Down until You Found "Go-Head or Go-Middle" Link</i></p>
<p><i>Scroll Down until You Found "Go-Head or Go-Middle" Link</i></p>
<p><i>Scroll Down until You Found "Go-Head or Go-Middle" Link</i></p>
<p><i>Scroll Down until You Found "Go-Head or Go-Middle" Link</i></p>
<p><i>Scroll Down until You Found "Go-Head or Go-Middle" Link</i></p>
<p><i>Scroll Down until You Found "Go-Head or Go-Middle" Link</i></p>
<p><i>Scroll Down until You Found "Go-Head or Go-Middle" Link</i></p>
<!--  Note that we take the hash part in the link as target in the page.-->
<a href="#GoHead" ><b>Go to Head</b></a>
<a href="#GoMiddle" ><b>Go to Middle</b></a>

<p id="Footer">Click me , am the end of the page. </p>
</body>
</html>

Fast scroll up using JQuery will be using :
javascript code

// Here it scroll to the top the page - to body or html tag
    $('#Anchor').click(function() {
    $('html, body').animate({ scrollTop:0 }, 'fast');
    return false;
    });

Java

C/C++

PHP

C#

HTML

CSS

ASP

Javascript

JQuery

AJAX

XSD

Python

Matlab

R Scripts

Weka

Control scroll speed using JQuery

Topic Tags