Posted By

genik on 05/06/11


Tagged

link


Versions (?)

Access Fast Link on Scrolling a Document


 / Published in: jQuery
 

Show fast link when scrolling down/up the document.

  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  

You need to login to post a comment.