How can i create a Floating Button Using jQuery and CSS?

Question

var name = "#floatMenu";
var menuYloc = null;

$(document).ready(function () {
    menuYloc = parseInt($(name).css("top").substring(0, $(name).css("top").indexOf("px")))

    $(window).scroll(function () {
        var offset = menuYloc + $(document).scrollTop() + "px";
        $(name).animate({ top: offset }, { duration: 500, queue: false });
    });

How can i create a floating button using jQuery and CSS?

Answer 1

You could achieve a floating button much simpler with css position: fixed; top: 100px; left: 100px. This would always be visible when you scroll the page and on the same spot.

Answer 2

There are two options you can choose from.

CSS or JavaScript (like you attempt in your snippet)

Chris Coyier has explained this already, so I'm just going to link to his page: http://css-tricks.com/scrollfollow-sidebar/

Using the CSS method, you won't get any juicy animations.