JavaScript / DHTML / AJAX RSS JavaScript / DHTML / AJAX RSS

Smooth scrolling for a page

Please support our JavaScript / DHTML / AJAX advertiser: PostgreSQL or MySQL? Compare and contrast the two most popular open source databases
Reply

•
•
Join Date: May 2009
Posts: 21
Reputation: akshits is an unknown quantity at this point 
Solved Threads: 0
akshits akshits is offline Offline
Newbie Poster

Smooth scrolling for a page

 
0
  #1
Jun 21st, 2009
Hello,

Can anyone tell me how to smooth scroll to a link like this:-

JavaScript / DHTML / AJAX Syntax (Toggle Plain Text) 
  1.  
  2. <!-- Link invisible, used to move up -->
  3. <a name="test" id="test"></a>
  4. <br /><!-- To cover up the full page and more -->
  5. <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
http://www.facefunbook.com/
Reply With Quote Quick reply to this message  
•
•
Join Date: Aug 2008
Posts: 954
Reputation: essential will become famous soon enough essential will become famous soon enough 
Solved Threads: 131
Featured Poster
essential's Avatar
essential essential is offline Offline
Posting Shark

Re: Smooth scrolling for a page

 
0
  #2
Jun 22nd, 2009
Try this one :

You can scroll to any element(s) in your page using the crawl( elementID ); function.

JavaScript / DHTML / AJAX Syntax (Toggle Plain Text) 
  1. <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
  2.    "http://www.w3.org/TR/html4/loose.dtd">
  3. <html id="html40L" lang="en">
  4. <head>
  5. <meta http-equiv="X-UA-Compatible" content="IE=EmulateIE7">
  6. <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
  7. <meta http-equiv="Content-Style-Type" content="text/css">
  8. <meta http-equiv="Content-Script-Type" content="text/javascript">
  9. <meta http-equiv="Window-target" content="_top">
  10. <title>Free Live Help!</title>
  11. <style type="text/css">
  12. <!--
  13. body { min-height : 1200px; }
  14. div#main { position : absolute; top : 1200px }
  15. -->
  16. </style>
  17. <script type="text/javascript">
  18. <!--
  19. var Scroller = function() { };
  20. Scroller.prototype = {
  21.    coords : function() {
  22.       try {
  23.          if ( "pageYOffset" in self ) {
  24.          this.posY = self.pageYOffset;
  25.          } else if ( "scrollTop" in document.documentElement ) {
  26.          this.postY = document.documentElement.scrollTop;
  27.          } else {
  28.          this.posY = document.body.scrollTop;
  29.          }
  30.       } catch( e ) {
  31.       this.posY = 0;
  32.       } return this.posY;
  33.    },
  34.    ePos : function( elem ) {
  35.    this.aPos = this.elem.offsetTop;
  36.    this.dPos = this.elem;
  37.       while( this.dPos.offsetParent && this.dPos.offsetParent !== document.body ) {
  38.       this.dPos = this.dPos.offsetParent;
  39.       this.aPos += this.dPost.offsetTop;
  40.       } return this.aPos;
  41.    },
  42.    smoothScroll : function( elem ) { 
  43.    this.elem = (( "getElementById" in document ) ? document.getElementById( elem ) : document.all[ elem ] );
  44.    this.start = this.coords();
  45.    this.end = this.ePos( this.elem ); 
  46.    this.distance = (( this.end > this.start ) ? (( this.end ) - this.end ) : (( this.start ) - this.end ));  
  47.      if ( this.distance < 100 ) {
  48.       window.scrollTo( 0, this.end );
  49.       return;
  50.      } 
  51.    this.speed = Math.round( this.distance / 100 );
  52.    this.begin = Math.round( this.distance / 25 );
  53.    this.startNow = (( this.end > this.start ) ? this.start + this.begin : this.start - this.begin );
  54.    this.counter = 0;
  55.       if ( this.end > this.start ) {
  56.          for ( var x = this.start; x < this.end; x += this.begin ) {
  57.          window.setTimeout("window.scrollTo( 0, " + this.startNow + " )", this.counter * this.speed );
  58.          this.startNow += this.begin;
  59.             if ( this.startNow > this.end ) { 
  60.             this.startNow = this.end;
  61.             this.counter++;
  62.             } 
  63.          } return;
  64.       } for ( var i = this.start; i > this.end; i -= this.begin ) {
  65.       window.setTimeout("window.scrollTo(0, " + this.startNow + " )", this.counter * this.speed );
  66.       this.startNow -= this.begin;
  67.          if ( this.start < this.end ) {
  68.          this.startNow = this.end;
  69.          this.counter++;
  70.          }
  71.       }  
  72.    } 
  73. };
  74.  
  75.  
  76. var crawl = function( elemID ) {
  77. var Y = new Scroller();
  78.  
  79. Y.smoothScroll( elemID );  
  80. };
  81. // -->
  82. </script>
  83. </head>
  84. <body>
  85. <div id="divtop"><a href="javascript:void(0);" onclick="crawl( 'main' );">DIVTOP : CLICK ME!</a></div>
  86. <div id="main"><a href="javascript:void(0);" onclick="crawl( 'divtop' );">scrollUp smoothly to div top</a></div>
  87. </body>
  88. </html>

hope it helps...
Reply With Quote Quick reply to this message  
•
•
Join Date: May 2009
Posts: 21
Reputation: akshits is an unknown quantity at this point 
Solved Threads: 0
akshits akshits is offline Offline
Newbie Poster

Re: Smooth scrolling for a page

 
0
  #3
Jun 22nd, 2009
•
•
•
•
Originally Posted by essential View Post
Try this one :

You can scroll to any element(s) in your page using the crawl( elementID ); function.

JavaScript / DHTML / AJAX Syntax (Toggle Plain Text) 
  1. <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
  2.    "http://www.w3.org/TR/html4/loose.dtd">
  3. <html id="html40L" lang="en">
  4. <head>
  5. <meta http-equiv="X-UA-Compatible" content="IE=EmulateIE7">
  6. <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
  7. <meta http-equiv="Content-Style-Type" content="text/css">
  8. <meta http-equiv="Content-Script-Type" content="text/javascript">
  9. <meta http-equiv="Window-target" content="_top">
  10. <title>Free Live Help!</title>
  11. <style type="text/css">
  12. <!--
  13. body { min-height : 1200px; }
  14. div#main { position : absolute; top : 1200px }
  15. -->
  16. </style>
  17. <script type="text/javascript">
  18. <!--
  19. var Scroller = function() { };
  20. Scroller.prototype = {
  21.    coords : function() {
  22.       try {
  23.          if ( "pageYOffset" in self ) {
  24.          this.posY = self.pageYOffset;
  25.          } else if ( "scrollTop" in document.documentElement ) {
  26.          this.postY = document.documentElement.scrollTop;
  27.          } else {
  28.          this.posY = document.body.scrollTop;
  29.          }
  30.       } catch( e ) {
  31.       this.posY = 0;
  32.       } return this.posY;
  33.    },
  34.    ePos : function( elem ) {
  35.    this.aPos = this.elem.offsetTop;
  36.    this.dPos = this.elem;
  37.       while( this.dPos.offsetParent && this.dPos.offsetParent !== document.body ) {
  38.       this.dPos = this.dPos.offsetParent;
  39.       this.aPos += this.dPost.offsetTop;
  40.       } return this.aPos;
  41.    },
  42.    smoothScroll : function( elem ) { 
  43.    this.elem = (( "getElementById" in document ) ? document.getElementById( elem ) : document.all[ elem ] );
  44.    this.start = this.coords();
  45.    this.end = this.ePos( this.elem ); 
  46.    this.distance = (( this.end > this.start ) ? (( this.end ) - this.end ) : (( this.start ) - this.end ));  
  47.      if ( this.distance < 100 ) {
  48.       window.scrollTo( 0, this.end );
  49.       return;
  50.      } 
  51.    this.speed = Math.round( this.distance / 100 );
  52.    this.begin = Math.round( this.distance / 25 );
  53.    this.startNow = (( this.end > this.start ) ? this.start + this.begin : this.start - this.begin );
  54.    this.counter = 0;
  55.       if ( this.end > this.start ) {
  56.          for ( var x = this.start; x < this.end; x += this.begin ) {
  57.          window.setTimeout("window.scrollTo( 0, " + this.startNow + " )", this.counter * this.speed );
  58.          this.startNow += this.begin;
  59.             if ( this.startNow > this.end ) { 
  60.             this.startNow = this.end;
  61.             this.counter++;
  62.             } 
  63.          } return;
  64.       } for ( var i = this.start; i > this.end; i -= this.begin ) {
  65.       window.setTimeout("window.scrollTo(0, " + this.startNow + " )", this.counter * this.speed );
  66.       this.startNow -= this.begin;
  67.          if ( this.start < this.end ) {
  68.          this.startNow = this.end;
  69.          this.counter++;
  70.          }
  71.       }  
  72.    } 
  73. };
  74.  
  75.  
  76. var crawl = function( elemID ) {
  77. var Y = new Scroller();
  78.  
  79. Y.smoothScroll( elemID );  
  80. };
  81. // -->
  82. </script>
  83. </head>
  84. <body>
  85. <div id="divtop"><a href="javascript:void(0);" onclick="crawl( 'main' );">DIVTOP : CLICK ME!</a></div>
  86. <div id="main"><a href="javascript:void(0);" onclick="crawl( 'divtop' );">scrollUp smoothly to div top</a></div>
  87. </body>
  88. </html>

hope it helps...
Thanks, will try soon!
Regards,
Akshit Soota
http://www.facefunbook.com/
Reply With Quote Quick reply to this message  
Reply

Quick Reply to Thread
This thread is more than three months old.
Perhaps start a new thread instead?
•
•
•
•
•
•
•
•
Message:
•
•
•
•



Similar Threads
Other Threads in the JavaScript / DHTML / AJAX Forum
Thread Tools Search this Thread



acid2 ajax ajaxcode ajaxhelp ajaxjspservlets animate automatically beta box browser bug calendar captchaformproblem cart checkbox child class close column createrange() css cursor decimal dependent design disablefirebug dom download dropdown editor element engine enter error events explorer ext file focus form forms frameworks google gwt gxt highlightedword html htmlform ie8 iframe images index internet java javascript jawascriptruntimeerror jquery jsf jsfile jump libcurl listbox math menu microsoft mimic mp4 object onmouseoutdivproblem onmouseover onreadystatechange parent pdf php player post problem progressbar prototype regex runtime scale scroll search security select shopping size software sql text textarea w3c web website window windowofwords windowsxp wysiwyg \n
About Us | Contact Us | Advertise | DaniWeb | Acceptable Use Policy | RSS Feed

©2003 - 2009 DaniWeb® LLC