Advanced Search

Return to Snippet

Revision: 45757
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
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
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