simplest jquery to have div "position:fixed" to the bottom right corner(always.. like on scrolling down)?

Hello i am relatively new to jquery but i like it, was wondering if i can have a div positioned at the bottom right corner开发者_C百科 of the page so that it's position remains fixed there even when we scroll down the page. Thereafter i need to pass a link through an image in the div to a specific anchor in the page. It should be short and simple.

#divid{
    position: fixed;
    right: 0;
    bottom: 0;
}

If you're okay accepting that position:fixed isn't supported in IE6 and IE7 has some caveats, then don't use jQuery at all:

<style type="text/css">
    #myFixedDiv {
        position: fixed;
        bottom: 0;
        right: 0;
        ...
    }
</style>

<div id="myFixedDiv">
    <a href="#myTargetDiv"><img src="img.gif" /></a>
</div>

<div id="myTargetDiv">
    ...
</div>

etc. However, if IE6 is an issue, or if that doesn't work for whatever reason, you can just bind an event to the window scroll event to help out:

<script type="text/javascript">
    var $myFixedDiv = $('#myFixedDiv');
    var iFixedDivHeight = $myFixedDiv.outerHeight({ 'margin': true });

    $(window).bind('scroll', function(e) {
        var iWindowHeight = $(window).height();
        var iScrollPosition = $(window).scrollTop(); // or document.body.scrollTop
        $myFixedDiv.css({ 'top': iWindowHeight + iScrollPosition - iFixedDivHeight });
    });
</script>

or something to that effect. HTH.

No jQuery needed

<div id="fixed-element" style="position:fixed; bottom:5px; right: 5px; z-index: 999">
    <a href="#myAnchor"><img src="/src/to/image.jpg" /></a>
</div>

But if it was me, I would do this:

(Assuming the width and height of the image are 30px, using inline CSS but I'd have it in an external file)

<a href="#myAnchor" id="fixed-element" style="display:block; position:fixed; bottom:5px; right: 5px; z-index: 999; width: 30px; height: 30px; background:url(/src/to/image.jpg) no-repeat 0 0 transparent; text-indent: -9999">Click me</a>

Check this link out: This is how you can fix the footer which will always be visible