Prevent href=# with jQuery jump to top

Question

I'm using toggle script but every time I click on the script link it does toggle but it also jump to page top! Any ideas? Here is the code:

<a href="" id="button2">Read More…<a>
<div id="hidden_content2" style="display:none;">
<p>bla bla</p>
</style>
</div>
<script>
$(document).ready(function() {
   $("#button2").toggle(
      function() {
         $(this).text('Hide Content…');
      },
      function() {
         $(this).text('Read More…');
      }
   ).click(
      function() {
         $("#hidden_content2").slideToggle("slow"…
      }
   );
});
</script>

Lightness Races in Orbit · Answer 1 · 2013-03-07T12:40:30.843

3

return false from your click handler function. This prevents the link's default behaviour.

You also have a typo in your click handler:

$("#hidden_content2").slideToggle("slow"…

should be:

$("#hidden_content2").slideToggle("slow");

This will break your handler (including the return false) until fixed.

edited Mar 07 '13 at 12:40

answered Mar 07 '13 at 12:25

Lightness Races in Orbit

378,754
76
643
1,055

thanks but nothing worked! i dont what to do!!!! i'm using cascade html template from themeforest – user2144097 Mar 07 '13 at 12:36
"Nothing worked" is not at all a useful thing to say. Please provide us with the results of your debugging and analysis. – Lightness Races in Orbit Mar 07 '13 at 12:39
i've tried every single one of the solutions given in the responses, but it keeps jump to top. even when i deleted the href="" – user2144097 Mar 07 '13 at 12:41

score 2 · Answer 2 · answered Mar 07 '13 at 12:25

2

Prevent the default action of the event. Note that toggle event method is deprecated, you can use text method's callback function instead.

$(document).ready(function () {
    $("#button2").click(function (event) {
        event.preventDefault();
        $(this).text(function (i, text) {
            return text == 'Hide Content…' ? 'Read More…' : 'Hide Content…'
        });
        $("#hidden_content2").stop().slideToggle("slow");
    });
})

answered Mar 07 '13 at 12:25

Ram

143,282
16
168
197

thanks but nothing worked! i dont what to do!!!! i'm using cascade html template from themeforest – user2144097 Mar 07 '13 at 12:36

score 0 · Answer 3 · answered Mar 07 '13 at 12:22

0

use : JavaScript:void(0); in href

<a href="jJavaScript:void(0);" id="button2">Read More…<a>
<div id="hidden_content2" style="display:none;">
<p>bla bla</p>
</style>
</div>
<script>
$(document).ready(function() {
$("#button2").toggle(function() {
$(this).text('Hide Content…');
}, function() {
$(this).text('Read More…');
}).click(function(){
$("#hidden_content2").slideToggle("slow"…
});
});

answered Mar 07 '13 at 12:22

supersaiyan

1,670
5
16
36

Read http://stackoverflow.com/a/2479904/560648, and http://stackoverflow.com/questions/134845/href-attribute-for-javascript-links-or-javascriptvoid0 (ignoring the top-voted answer, because it is wrong). – Lightness Races in Orbit Mar 07 '13 at 12:31
thanks but nothing worked! i dont what to do!!!! i'm using cascade html template from themeforest – user2144097 Mar 07 '13 at 12:36

score 0 · Answer 4 · edited Mar 07 '13 at 12:27

0

You could you use event.preventDefault() in your click.

http://api.jquery.com/event.preventDefault/

I think that the click method should be replaced by on in jQuery now.

edited Mar 07 '13 at 12:27

Lightness Races in Orbit

378,754
76
643
1,055

answered Mar 07 '13 at 12:26

Bertrand

388
4
13

score 0 · Answer 5 · answered Mar 07 '13 at 12:27

0

you can use preventDefault, for example:

.click(function(e){
    e.preventDefault();
    $("#hidden_content2").slideToggle("slow"…
});

Or alternatively, you can just use a span or div instead an anchor tag and assign it a click() event, as it seems you don't actually need to use an anchor tag.

answered Mar 07 '13 at 12:27

Pete Uh

630
4
7

it happened even when i deleted the href="" – user2144097 Mar 07 '13 at 12:39
Can you put together a jsfiddle example of what is happening? – Pete Uh Mar 07 '13 at 12:48
thats wierd. when i'm putting the code on jsfiddle ( http://jsfiddle.net/ZV7fD/ ) or on simple stand alnoe html the cript doesn't work, but when i open it at the cascade template from themeforest it does wotk with the jump to top issue – user2144097 Mar 07 '13 at 13:25
can you post a link to it not working then? That should give people more information to help you. – Pete Uh Mar 07 '13 at 14:33

score 0 · Answer 6 · answered Mar 07 '13 at 12:28

First of all, why are you using an anchor link. It's not linking to anything, so should it be a link? Can't you just use a normal div and set the cursor to pointer with CSS? If you do this, you don't need to prevent the default behavior of clicking on an empty link.

If you keep the link though, you have two options.

$('#button2').toggle(function(event) {
   event.preventDefault(); 
});

or

$('#button2').toggle(function() {
    return false;
});

it happened even when i deleted the href="" – user2144097 Mar 07 '13 at 12:39 — user2144097, Mar 07 '13 at 12:39

score 0 · Answer 7 · answered Mar 07 '13 at 12:30

Use that:
Just a litte update in your code

<a href="#" id="button2">Read More…<a>

<div id="hidden_content2" style="display:none;">
    <p>bla bla</p>
</div>

<script type="text/javascript">
$(document).ready(function() {

    $("#button2").toggle(function() {

        $(this).text('Hide Content…');

        }, function() {

            $(this).text('Read More…');

    }).click(function(){

        $("#hidden_content2").slideToggle("slow");
        return false;

    });

});
</script>

doesnt work.. the "read more" shows up for a second on page load and then disappears — user2144097, Mar 07 '13 at 13:44

Prevent href=# with jQuery jump to top

7 Answers7