Question

I’m using Twitter’s Bootstrap topbar.

When I click on some navigation href

href=#SomeDivName

Like when you press the navigation in this page:

http://twitter.github.com/bootstrap/examples/fluid.html#contact

The page scrolls down a bit.

I want the relevant section will appear after clicking,
but I don’t want the page to scroll down.

Answer 1

$('a[href="#SomeDiveName"]').on('click', false);

This will return false when you click on the anchor tag with an href attribute set to #SomeDiveName. Which will prevent the default behavior of the element, which in this case is to scroll to the element to which the href attribute refers.

If you have a set of these links then I’d suggest adding a class to identify them so you can select them all at once:

$('.stop-this-link').on('click', false);

This will prevent the default behavior for all elements with the stop-this-link class whenever the element is clicked. Selecting by class is a lot faster than by attribute too. When searching by attribute, every element in the DOM must be checked.

Note that returning false in a jQuery event handler is the same as calling: event.preventDefault() and event.stopPropagation().

For more info about these functions see here:

• event.preventDefault(): http://api.jquery.com/event.preventdefault
• event.stopPropagation(): http://api.jquery.com/event.stoppropagation