Hello,
Can anyone tell me how to smooth scroll to a link like this:-
<!-- Link invisible, used to move up -->
<a name="test" id="test"></a>
<br /><!-- To cover up the full page and more -->
<a href="#a">Scroll to #test</a>When a user clicks on "Scroll to #test" it must smoothly scroll to "#test" using CSS or JavaScript!
I wouldn't preffer and libraries but anyways it will work!
Thanks,
Akshit Soota
Try this one :
You can scroll to any element(s) in your page using the crawl( elementID ); function.
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html id="html40L" lang="en">
<head>
<meta http-equiv="X-UA-Compatible" content="IE=EmulateIE7">
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<meta http-equiv="Content-Style-Type" content="text/css">
<meta http-equiv="Content-Script-Type" content="text/javascript">
<meta http-equiv="Window-target" content="_top">
<title>Free Live Help!</title>
<style type="text/css">
<!--
body { min-height : 1200px; }
div#main { position : absolute; top : 1200px }
-->
</style>
<script type="text/javascript">
<!--
var Scroller = function() { };
Scroller.prototype = {
coords : function() {
try {
if ( "pageYOffset" in self ) {
this.posY = self.pageYOffset;
} else if ( "scrollTop" in document.documentElement ) {
this.postY = document.documentElement.scrollTop;
} else {
this.posY = document.body.scrollTop;
}
} catch( e ) {
this.posY = 0;
} return this.posY;
},
ePos : function( elem ) {
this.aPos = this.elem.offsetTop;
this.dPos = this.elem;
while( this.dPos.offsetParent && this.dPos.offsetParent !== document.body ) {
this.dPos = this.dPos.offsetParent;
this.aPos += this.dPost.offsetTop;
} return this.aPos;
},
smoothScroll : function( elem ) {
this.elem = (( "getElementById" in document ) ? document.getElementById( elem ) : document.all[ elem ] );
this.start = this.coords();
this.end = this.ePos( this.elem );
this.distance = (( this.end > this.start ) ? (( this.end ) - this.end ) : (( this.start ) - this.end ));
if ( this.distance < 100 ) {
window.scrollTo( 0, this.end );
return;
}
this.speed = Math.round( this.distance / 100 );
this.begin = Math.round( this.distance / 25 );
this.startNow = (( this.end > this.start ) ? this.start + this.begin : this.start - this.begin );
this.counter = 0;
if ( this.end > this.start ) {
for ( var x = this.start; x < this.end; x += this.begin ) {
window.setTimeout("window.scrollTo( 0, " + this.startNow + " )", this.counter * this.speed );
this.startNow += this.begin;
if ( this.startNow > this.end ) {
this.startNow = this.end;
this.counter++;
}
} return;
} for ( var i = this.start; i > this.end; i -= this.begin ) {
window.setTimeout("window.scrollTo(0, " + this.startNow + " )", this.counter * this.speed );
this.startNow -= this.begin;
if ( this.start < this.end ) {
this.startNow = this.end;
this.counter++;
}
}
}
};
var crawl = function( elemID ) {
var Y = new Scroller();
Y.smoothScroll( elemID );
};
// -->
</script>
</head>
<body>
<div id="divtop"><a href="javascript:void(0);" onclick="crawl( 'main' );">DIVTOP : CLICK ME!</a></div>
<div id="main"><a href="javascript:void(0);" onclick="crawl( 'divtop' );">scrollUp smoothly to div top</a></div>
</body>
</html>hope it helps...
Try this one :
You can scroll to any element(s) in your page using the
crawl( elementID );function.<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <html id="html40L" lang="en"> <head> <meta http-equiv="X-UA-Compatible" content="IE=EmulateIE7"> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> <meta http-equiv="Content-Style-Type" content="text/css"> <meta http-equiv="Content-Script-Type" content="text/javascript"> <meta http-equiv="Window-target" content="_top"> <title>Free Live Help!</title> <style type="text/css"> <!-- body { min-height : 1200px; } div#main { position : absolute; top : 1200px } --> </style> <script type="text/javascript"> <!-- var Scroller = function() { }; Scroller.prototype = { coords : function() { try { if ( "pageYOffset" in self ) { this.posY = self.pageYOffset; } else if ( "scrollTop" in document.documentElement ) { this.postY = document.documentElement.scrollTop; } else { this.posY = document.body.scrollTop; } } catch( e ) { this.posY = 0; } return this.posY; }, ePos : function( elem ) { this.aPos = this.elem.offsetTop; this.dPos = this.elem; while( this.dPos.offsetParent && this.dPos.offsetParent !== document.body ) { this.dPos = this.dPos.offsetParent; this.aPos += this.dPost.offsetTop; } return this.aPos; }, smoothScroll : function( elem ) { this.elem = (( "getElementById" in document ) ? document.getElementById( elem ) : document.all[ elem ] ); this.start = this.coords(); this.end = this.ePos( this.elem ); this.distance = (( this.end > this.start ) ? (( this.end ) - this.end ) : (( this.start ) - this.end )); if ( this.distance < 100 ) { window.scrollTo( 0, this.end ); return; } this.speed = Math.round( this.distance / 100 ); this.begin = Math.round( this.distance / 25 ); this.startNow = (( this.end > this.start ) ? this.start + this.begin : this.start - this.begin ); this.counter = 0; if ( this.end > this.start ) { for ( var x = this.start; x < this.end; x += this.begin ) { window.setTimeout("window.scrollTo( 0, " + this.startNow + " )", this.counter * this.speed ); this.startNow += this.begin; if ( this.startNow > this.end ) { this.startNow = this.end; this.counter++; } } return; } for ( var i = this.start; i > this.end; i -= this.begin ) { window.setTimeout("window.scrollTo(0, " + this.startNow + " )", this.counter * this.speed ); this.startNow -= this.begin; if ( this.start < this.end ) { this.startNow = this.end; this.counter++; } } } }; var crawl = function( elemID ) { var Y = new Scroller(); Y.smoothScroll( elemID ); }; // --> </script> </head> <body> <div id="divtop"><a href="javascript:void(0);" onclick="crawl( 'main' );">DIVTOP : CLICK ME!</a></div> <div id="main"><a href="javascript:void(0);" onclick="crawl( 'divtop' );">scrollUp smoothly to div top</a></div> </body> </html>hope it helps...
Thanks, will try soon!
Regards,
Akshit Soota
We're a friendly, industry-focused community of developers, IT pros, digital marketers, and technology enthusiasts meeting, networking, learning, and sharing knowledge.