I have a simple jQuery function that makes a <div> fade in/out, but when it does, the page jumps to the top. Is there a way to make the page stay where it is?

The <div> in question is not at the top of the page in case you were wondering.

8 answers

4
points

I suspect you must be using a < href > to trigger this fade in/out. In that case, add a "return false;" in the onclick function at the end.

Answered almost 8 years ago by Divya Manian
2
points

Cool! Glad to be of help!

Answered almost 8 years ago by Divya Manian
2
points

Just to clarify what the answer is for people who run across this:

$('a#event1').click(function(c)
{
    c.preventDefault(); // this prevents the original href of the link from being opened
    c.stopPropigation(); // this prevents the click from triggering click events up the DOM from this element
    $('div#tablePop1').fadeIn(300);
});

You don't necessarily need the stopPropigation() call, but it will prevent the event from bubbling up the DOM.

Answered almost 8 years ago by Daniel Ryan
2
points

:) And just to clarify further for those that get an error when running "stopPropigation()", it's actually supposed to be:

c.stopPropagation();
Answered almost 8 years ago by Anatoli Papirovski
0
points

Exactly where/how do I add it? I'm totally new to JavaScript/jQuery. Here's the jQuery markup:

$(document).ready(function()
{
    $('div.event').hide();


    $('a#event1').click(function()
        {
            $('div#tablePop1').fadeIn(300);
        });

    $('a#event2').click(function()
        {
            $('div#tablePop2').fadeIn(300);
        });




    $('a.closeEvent').click(function()
        {
            $('div.event').fadeOut(300);
        });
});
Answered almost 8 years ago by Kevin Tomasic
0
points

never mind ... I figured it out. Thanks for the help Divya!

Answered almost 8 years ago by Kevin Tomasic
0
points

It may help if you posted your final code to help others who need an answer to this question

Answered almost 8 years ago by Matt Sephton
0
points

I used Divya's advice:

$(document).ready(function()
{
    $('div.event').hide();


    $('a#event1').click(function()
        {
            $('div#tablePop1').fadeIn(300);return false
        });

    $('a#event2').click(function()
        {
            $('div#tablePop2').fadeIn(300);return false
        });

    $('a.closeEvent').click(function()
        {
            $('div.event').fadeOut(300);return false
        });
});
Answered almost 8 years ago by Kevin Tomasic