Issue with Show/Hide function in jQuery. Jumps to top of page

Question

I'm using the click/hide function for my questions and answers page. But when I click on the question to show the answer it jumps back up to the top. What do I need to do to get this to stop.

This is my coding:

Script:

<script type="text/javascript">
jQuery(document).ready(function() {
jQuery(".sub").hide();
//toggle the componenet with class msg_body
jQuery(".cthrough").click(function()
{
jQuery(this).next(".sub").slideToggle(500);
});});
</script>

CSS:

.cthrough {
    display: inline-block;
    font-size: 15px;
    font-family: 'Anaheim', sans-serif;
    text-transform: uppercase;
    letter-spacing: 0px;
}

.sub {
    display: inline-block;
    font-size: 13px;
    padding-left: 10px;
}

HTML:

<a href="#" class="cthrough">This is my question</a>
<div class="sub">
    This is my answer.
</div>

I have tried converting the a href=# to just a div class but that doesn't make the question clickable. I also tried taking the # out but that didn't help either.

Not a duplicate, but relevant to the topic: http://stackoverflow.com/questions/134845/href-attribute-for-javascript-links-or-javascriptvoid0/138233#138233 — James Montagne, Oct 23 '13 at 20:15

score 4 · Answer 1 · answered Oct 23 '13 at 20:11

4

Keep your href="#" and use jQuery's .preventDefault() to prevent the default action of jumping back to the top.

jQuery(".cthrough").click(function(e) {
    e.preventDefault();  // <-- first line
    jQuery(this).next(".sub").slideToggle(500);
    ...

answered Oct 23 '13 at 20:11

Sparky

98,165
25
199
285

2

Thanks, it works great! Tessa Wilde, please reward Sparky for his answer! – John Jan 09 '14 at 13:00

score 1 · Answer 2 · edited Apr 28 '21 at 20:38

The root cause with # in href. If the URL contains # followed by div name, then user will be landed in that div. This is the browser's default behaviour, In above case when click that URL # is appended to root URL, that's why it takes to top of the page.

To fix this remove href="#" and use style="cursor: pointer" to keep the hand/pointer symbol to that link.

Instead of <a href="#" class="cthrough">This is my question</a> Use <a class="cthrough">This is my question</a> and add the cursor: pointer style to that class(.cthrough).

score 0 · Answer 3 · edited May 13 '21 at 22:27

Having the same trouble and e.preventDefault() not working for me if I apply duration to say a slideDown().

Kind of hacky, but this works for me.
The browser freaks out trying to figure the size of the element you're showing during the animation.
So, I show it right away, now the browser knows it's size.
But with low opacity, and then I just fade it in.

// show/hide jobs section
$('.job').hide();

$('a.jobTrigger').click(function(e){
    $('.job').hide();
    $(this).next('.job').show(0, function() {
        
        //animation to stop page jump
        $(this).css('opacity' , '.1');
        $(this).animate({
            opacity: 1
        });
    });
    e.preventDefault(); //keeps hash out of URL
});

Issue with Show/Hide function in jQuery. Jumps to top of page

3 Answers3