It came up very briefly in the last video: how do you stop the browser from jumping down when you click a hash link? That is the default browser behavior, and fortunately, with JavaScript, we can tell the browser not to do that.

The most straightforward way to handle it is like this:

$("a").on("click", function(event) {


You'll see these links don't jump down like you might think the would:

See the Pen a5aeaa4890837ac172605983324d5470 by Chris Coyier (@chriscoyier) on CodePen

Be careful with that though of course. That will stop a hash link from jumping down the page, but it will also stop a normal link from going to a new URL. So only use it on anchor links that you know you exclusively want to handle in your own JavaScript. You could narrow things down like $("a[href^='#']"). e.g. "The href attribute of the link starts with a hash."

But often you'll see this too:

$("a").on("click", function() {
  return false;


And that accomplishes the same thing. What is happening here is that the return false; is actually doing two things. It is doing the event.preventDefault(); and it is doing another thing: event.stopPropagation();

You can use return false; if you like, you just need to understand what stopPropagation is and be OK with it doing that. I find usually it's best not to stopPropagation unless you know that you specifically want to do that. What it does is stop the "bubbling" of the DOM event. For instance if you're DOM is like this:

<nav role='navigation'>
    <li><a href="#">Home</a></li>
    <li><a href="#">About</a></li>
    <li><a href="#">Clients</a></li>
    <li><a href="#">Contact Us</a></li>

Then you click squarely right on the word "Home", that click event will trigger on the anchor link, then it will bubble up to the list item, then bubble up to the unordered list, then the nav element, all all the way up to the document itself.

When you do stopPropagation, on whatever element's event you run that on, the bubbling will stop there. Just be aware!

I wrote more about this difference here.

Toward the end of the video I talk about preventing scrolling on an element by preventDefault. I was just totally wrong that you could do that. It just so happens that's one event that you can't stop like that. There are ways to prevent it like using CSS (overflow: hidden; - which might be weird) - or getting pretty fancy.


  1. User Avatar
    Michael Roach
    Permalink to comment#

    How do I get the sound effects to work with my animation? lol

  2. User Avatar
    Permalink to comment#

    Really cool videos. I appreciate your efforts for people like us. Thank you.
    What is the use of bubbling up the entire document when we click only a particular anchor element. Is it the default behavior?

  3. User Avatar
    Permalink to comment#

    This is a very good read on stopping event propagation. I read it b chance and it has changed how I think about propagation in JS forever!

    The Dangers of Stopping Event Propagation

Leave a Comment

Posting Code!

You may write comments in Markdown. This makes code easy to post, as you can write inline code like `<div>this</div>` or multiline blocks of code in triple backtick fences (```) with double new lines before and after.

Code of Conduct

Absolutely anyone is welcome to submit a comment here. But not all comments will be posted. Think of it like writing a letter to the editor. All submitted comments will be read, but not all published. Published comments will be on-topic, helpful, and further the discussion or debate.

Want to tell us something privately?

Feel free to use our contact form. That's a great place to let us know about typos or anything off-topic.