Advanced Search

Access Fast Link on Scrolling a Document

/ Published in: jQuery
Save to your folder(s)
Show fast link when scrolling down/up the document.

Expand | Embed | Plain Text

Copy this code and paste it in your HTML 
  1. /*Javascript*************************************************************************/
  2.  
  3. $(function(){
  4.  
  5.     /*Just sample data*/
  6.     for(i=1;i<=50;i++) $('body').append('<h1>text '+i+': blah...blah...blah...</h1>');
  7.  
  8.     /*Here's the code****************************************************************/	
  9.     /*Get center valign*/
  10.     var valign = parseInt((screen.availHeight / 2) - ($('div#menu').height() / 2));
  11.  
  12.     /*Init link to the center valign when load the document*/
  13.     $('div#menu').animate({'top': valign + 'px'}, 500);
  14.  
  15.     /*Animate the menu link when scrolling down/up the document*/
  16.     $(document).scroll(function(){
  17.         var top = $(this).scrollTop() + valign;
  18.         $('div#menu').animate({'top': top + 'px'}, 100);
  19.     });
  20.     /********************************************************************************/
  21.  
  22. });
  23.  
  24.  
  25. /*CSS********************************************************************************/
  26.  
  27. body{color:#CCC}
  28.  
  29. /*Container*/	
  30. div#menu{
  31.     right:5px;
  32.     position:absolute;
  33.     z-index:100;
  34.     overflow:hidden;
  35.     background:#CCC;
  36.     padding:1px;
  37.     width:32px;
  38. }
  39.  
  40. /*For anchor, you can change background with icon image*/
  41. div#menu a{
  42.     text-decoration:none;
  43.     width:30px;
  44.     height:30px;
  45.     line-height:30px;
  46.     margin:1px;
  47.     float:right;
  48.     text-align:center;
  49.     color:#FFF;
  50. }
  51.  
  52.  
  53. /*HTML*******************************************************************************/	
  54. <div id="menu">
  55.     <a href="#" style="background:#009">F</a>
  56.     <a href="#" style="background:#09C">t</a>
  57.     <a href="#" style="background:#609">Y</a>
  58. </div>

Report this snippet


Comments

RSS Icon Subscribe to comments

You need to login to post a comment.