Posted By

genik on 05/06/11

Tagged

link

Versions (?)

Last Edited at 05/06/11 11:24pm

Statistics

Viewed 504 times

Favorited by 0 user(s)

Related snippets

Access Fast Link on Scrolling a Document

/ Published in: jQuery

Show fast link when scrolling down/up the document.

Highlighted TextExpand

/*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>

Report this snippet Tweet

Comments

Subscribe to comments

Comment:

You need to login to post a comment.