Question

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

Answer 1

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