Control scroll speed using JQuery

Wed Jan 09, 2013 10:54 pm

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;
    });

Control scroll speed using JQuery

Control scroll speed using JQuery

Topic Tags