单击功能使页面以奇怪的方式滚动（不在页面顶部）

Question

First time asker, long time lurker.

I'm doing a fadein/out toggle that displays 1 of 2 charts depending on which button you click.

That bit works just fine, but I'm getting a weird page-jump glitch. Now, it's not the usual jump-to-the-top behaviour. I have that part covered in the code, and it doesn't do that.

Every time I click on one of the toggles, the page scrolls downward to the point where the chart area is at the bottom of the window.

But it gets weirder. If I make the browser window very short or very narrow (it's a responsive site), it stops doing this glitch. It's also not happening on iPhone or iPad at all, even though if I set the browser width to the same width as it would be on an iPad, the desktop browser still does the jumping.

There are no elements that are added/removed based on the viewport width in the area that's jumping around, and there are no anchor IDs that would be accidentally used as jump points.

Unfortunately I can't show the actual page to you, but I can show the script and a bit of the HTML. The code for both toggles is the same, just with the IDs switched around.

The script:

    $('#left-toggle > a').click(function(c)
    {
        c.preventDefault();
        c.stopPropagation();
        $('#right-toggle').removeClass('toggle-active');
        $('#left-toggle').addClass('toggle-active');
        $(pricing_subscriptionID).fadeOut('fast', function(){
            $(pricing_singleID).fadeIn('fast', function(){

            });
        });
    });

The HTML for the toggles:

<div id="chart-toggle">
     <div id="left-toggle" class="toggle-active"><a href="#">Single Pricing</a></div>
    <div id="right-toggle"><a href="#">Subscription Pricing</a></div>
</div>

"toggle-active" is just for styling.

Any ideas?

It seems to be almost wanting to centre the toggles on the page, but it's not quite putting them in the middle either.

JSFiddle: http://jsfiddle.net/TmrLw/

Answer 1

Probably its because the link's href is # which links to the top of the document. try to remove the href attribute

Answer 2

It's because of your link to # . Here are some ways you can fix this:

1. Replace "#" with something else

Instead of

<a href="#">Subscription Pricing</a>

Try this:

<a href="Javascript: void(0);">Subscription Pricing</a>

This will give you the cursor pointer you're looking for and avoid the page jump.

2. Create a class with the pointer effect

If you use this CSS rule:

.pointer {
    cursor: pointer;
}

Then you can wrap your text with this class instead:

<div class="pointer">Subscription Pricing</div>

3. Remove the default effect of "#"

This Javascript will get rid of its default effect:

$('a[href="#"]').click(function(e)
{
    // Cancel the default action
    e.preventDefault();
});

Hope this helps