Revision: 45757
Updated Code
at May 6, 2011 23:31 by genik
Updated Code
/*Javascript*************************************************************************/
$(function(){
/*Just sample data*/
for(i=1;i<=50;i++) $('body').append('<h1>text '+i+': blah...blah...blah...</h1>');
/*Here's the code****************************************************************/
/*Get center valign*/
var valign = parseInt((screen.availHeight / 2) - ($('div#menu').height() / 2));
/*Init link to the center valign when load the document*/
$('div#menu').animate({'top': valign + 'px'}, 500);
/*Animate the menu link when scrolling down/up the document*/
$(document).scroll(function(){
var top = $(this).scrollTop() + valign;
$('div#menu').animate({'top': top + 'px'}, 100);
});
/********************************************************************************/
});
/*CSS********************************************************************************/
body{color:#CCC}
/*Container*/
div#menu{
right:5px;
position:absolute;
z-index:100;
overflow:hidden;
background:#CCC;
padding:1px;
width:32px;
}
/*For anchor, you can change background with icon image*/
div#menu a{
text-decoration:none;
width:30px;
height:30px;
line-height:30px;
margin:1px;
float:right;
text-align:center;
color:#FFF;
}
/*HTML*******************************************************************************/
<div id="menu">
<a href="#" style="background:#009">F</a>
<a href="#" style="background:#09C">t</a>
<a href="#" style="background:#609">Y</a>
</div>
Revision: 45756
Updated Code
at May 6, 2011 23:26 by genik
Updated Code
/*Javascript*************************************************************************/
$(function(){
/*Just sample data*/
for(i=1;i<=50;i++) $('body').append('<h1>text '+i+': blah...blah...blah...</h1>');
/*Here's the code****************************************************************/
/*Get center valign*/
var valign = parseInt((screen.availHeight / 2) - ($('div').height() / 2));
/*Init link to the center valign when load the document*/
$('div').animate({'top': valign + 'px'}, 500);
/*Animate the menu link when scrolling down/up the document*/
$(document).scroll(function(){
var top = $(this).scrollTop() + valign;
$('div').animate({'top': top + 'px'}, 100);
});
/********************************************************************************/
});
/*CSS********************************************************************************/
body{color:#CCC}
/*Container*/
div#menu{
right:5px;
position:absolute;
z-index:100;
overflow:hidden;
background:#CCC;
padding:1px;
width:32px;
}
/*For anchor, you can change background with icon image*/
div#menu a{
text-decoration:none;
width:30px;
height:30px;
line-height:30px;
margin:1px;
float:right;
text-align:center;
color:#FFF;
}
/*HTML*******************************************************************************/
<div id="menu">
<a href="#" style="background:#009">F</a>
<a href="#" style="background:#09C">t</a>
<a href="#" style="background:#609">Y</a>
</div>
Revision: 45755
Initial Code
Initial URL
Initial Description
Initial Title
Initial Tags
Initial Language
at May 6, 2011 23:24 by genik
Initial Code
/*Javascript*************************************************************************/
$(function(){
/*Just sample data*/
for(i=1;i<=50;i++) $('body').append('<h1>text '+i+': blah...blah...blah...</h1>');
/*Here's the code****************************************************************/
/*Get center valign*/
var valign = parseInt((screen.availHeight / 2) - ($('div').height() / 2));
/*Init link to center valign when load the document*/
$('div').animate({'top': valign + 'px'}, 500);
/*Animate the menu link when scrolling down/up a document*/
$(document).scroll(function(){
var top = $(this).scrollTop() + valign;
$('div').animate({'top': top + 'px'}, 100);
});
/********************************************************************************/
});
/*CSS********************************************************************************/
body{color:#CCC}
/*Container*/
div#menu{
right:5px;
position:absolute;
z-index:100;
overflow:hidden;
background:#CCC;
padding:1px;
width:32px;
}
/*For anchor, you can change background with icon image*/
div#menu a{
text-decoration:none;
width:30px;
height:30px;
line-height:30px;
margin:1px;
float:right;
text-align:center;
color:#FFF;
}
/*HTML*******************************************************************************/
<div id="menu">
<a href="#" style="background:#009">F</a>
<a href="#" style="background:#09C">t</a>
<a href="#" style="background:#609">Y</a>
</div>
Initial URL
Initial Description
Show fast link when scrolling down/up the document.
Initial Title
Access Fast Link on Scrolling a Document
Initial Tags
link
Initial Language
jQuery