Bootstrap Drop Down Menu Causes Focus to Shift to Top of Page

Question

I have a Bootstrap drop down menu. When I select a value from the drop down menu, the focus shifts to the top of the page. The class options for the drop down menu are as follows:

<a class = "btn dropdown-toggle" data-toggle = "dropdown" data-target = "#">
    <span class = "caret"></span>
</a>

jFiddle example here. You'll need to scroll down on the results window to the see drop down menu.

What's the best way to remedy this behavior?

Answer 1

In your code you have # anchors.

When someone clicks on this, the browser will go to the top of the page in search for an anchor that does not exist.

Even if you remove the #, the link will think it needs to refresh the page.

If you need the anchor for styling, do something like this:

<a href = "javascript:return false;">link text</a>

http://jsfiddle.net/W7gbj/7/