How to animate a fixed div with jQuery without page scrollbar resetting to top


Tags: jquery,scroll,jquery-animate,css-position

Problem :

first post here, so be kind ;-)

I have a fixed 'menu' div in the body of a page, mostly hidden 'offscreen', in the right-hand margin, with its initial top and right set in CSS to show only a 'handle'.

The div scrolls OK with page content and I've introduced jQuery's animate function to slide this div out of the margin and back, when needed - as the handle is clicked. It's a simple script, simplified as...

var x = document.getElementById('menu');
if (x.style.right == '0px') {

        $j("#menu").animate({
            right:'-148px'
        });
    } else {

        $j("#menu").animate({
            right:'0px'
        });
    }

The issue is that whenever this menu div animation is triggered to 'open' or 'close', the page resets to top (its scrollbar position resets). I've tried adding code to trap and reset the scrollbar position but that introduces a 'flicker' effect on the page.

Any clues on how to fire the animation without affecting the page's scroll position?

Best,

Keith..



Solution :

Add return false at the end of click event or set href of link to href="javascript:void(0)"


    CSS Howto..

    How do I get my menu to drop down? CSS & HTML

    jason lewis basset did not show icons well in laravel 4

    How to recreate this image using css

    How to create a mobile navigation toggle using pure CSS?

    How to sort and combine this css rules so it doesn't repeat so much?

    How to reset css before repeating sequence

    PHP & CSS: How to get hover effect for each row of a table?

    Javafx CSS How to inherit background color from other css settings

    How do I uncollapse a margin?

    How to spread elements evenly (horizonatly)?

    How to size a content div to cover the entire content area in jQuery Mobile

    How to prevent HTML elements from being pushed down the page

    How to add separate style to google.visualization.DataTable without changing its own styles

    How to keep an :active css style after clicking a link?

    How can I get this element to clear the image so it sits in middle off the page on top of the background

    How to align an icon to the right of content

    How to shield a HTML tag from CSS?

    jquery .show() hides immediately

    How to create icons like font awesome

    How to change cursor on the NextGen Gallery Slideshow in Wordpress

    How to extract the text between two spans with lxml (or BeautifulSoup)?

    How can i put random values to css properties using JQuery?

    How to write css fallbacks for vh vw

    How to write specific CSS for mozilla, chrome and IE

    How to have an image zoom in and out automatically in the background

    Ruby on rails dropdown