Total members 11832 |It is currently Tue Aug 11, 2020 2:00 am Login / Join Codemiles

Java

C/C++

PHP

C#

HTML

CSS

ASP

Javascript

JQuery

AJAX

XSD

Python

Matlab

R Scripts

Weka





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




_________________
M. S. Rakha, Ph.D.
Queen's University
Canada


Author:
Mastermind
User avatar Posts: 2715
Have thanks: 74 time
Post new topic Reply to topic  [ 1 post ] 

  Related Posts  to : Control scroll speed using JQuery
 Motor DC Speed Control by switching ON and OFF Assembly     -  
 Hide, show and toggle effects with speed control     -  
 Show sidebar main menu with scroll down in the web page     -  
 Speed Painting     -  
 calculate speed of a car in javaCV     -  
 Slide automatically-specific speed to a determined position     -  
 How to increase WordPress Blog speed-decrease Page load time     -  
 PC control by mobile Project     -  
 TCP Transmission Control Protocol     -  
 Control HR tag width and height     -  



Topic Tags

JQuery Animate






Powered by phpBB © 2000, 2002, 2005, 2007 phpBB Group
All copyrights reserved to codemiles.com 2007-2011
mileX v1.0 designed by codemiles team
Codemiles.com is a participant in the Amazon Services LLC Associates Program, an affiliate advertising program designed to provide a means for sites to earn advertising fees by advertising and linking to Amazon.com