CODEWITHSUNDEEP
jqueryscrolljquery-animatecss-position
Keith Clarke
Keith Clarke

Reputation: 63

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

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..

Upvotes: 2

Views: 1115

Answers (1)

Pankaj Phartiyal
Pankaj Phartiyal

Reputation: 1691

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

Upvotes: 1

Related Questions