Member Avatar for flockit

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

Recommended Answers

All 2 Replies

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...

Member Avatar for flockit

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

Be a part of the DaniWeb community

We're a friendly, industry-focused community of developers, IT pros, digital marketers, and technology enthusiasts meeting, networking, learning, and sharing knowledge.