jquery # scrolls to top

Question

Possible Duplicate:
Avoid window jump to top when clicking #-links

On my site I have links that I click and jquery handles an event for them. The links are simple, eg:

<a href=# class=bleh>click</a>

The problem is, I click a link such as that, it scrolls to the top of the page (probably because of the #).

Is there any way to make the page not scroll up at all and just stay put?

I understand I dont need the href tag, but I want it to appear as a link.

score 1 · Answer 1 · answered Jul 12 '12 at 11:54

1

You can try disabling the click default behavior on links with href="#".

$('[href="#"]').click(function (e) {
    e.preventDefault();
});

answered Jul 12 '12 at 11:54

score 1 · Answer 2 · answered Jul 12 '12 at 11:54

1

you can use event.preventDefault() which prevents the default action of the click event:

If this method is called, the default action of the event will not be triggered.

$('.bleh').click(function(eve){
   eve.preventDefault()
})

answered Jul 12 '12 at 11:54

Ram

score 0 · Answer 3 · answered Jul 12 '12 at 11:57

0

$('.bleh').on('click', function(e) {
   e.preventDefault();
   return false;
})

answered Jul 12 '12 at 11:57

odupont

score 0 · Accepted Answer · answered Jul 12 '12 at 11:57

0

Or you can use this, slightly longer but works

<a href="javascript:void(0);" class="bleh">click</a>

answered Jul 12 '12 at 11:57

Ties

score 0 · Answer 5 · answered Jul 12 '12 at 11:58

0

Placing 'void' after the '#' should stop the scrolling and still allow the event to fire.

<a href=#void class=bleh>click</a>

answered Jul 12 '12 at 11:58

Web Develop Wolf

1

if you don't have an element with `id="void"` artibute: yes, otherwise no – Ties Jul 12 '12 at 11:59

5 Answers5