Preventing scrolling when a nested Bootstrap Dropdown
clicked

Question

I have two Bootstrap dropdown menus (split buttons). When the dropdown is active, the user can press on numbers going from 1 to 5, but when they press any of these, the user is redirected to the top of the page.

I understand that it's normal behavior (considering that they are clicking a "link"), but I want to prevent this effect because it affects the mobile experience. I tried to use return false in my jQuery code, but by doing so, when the dropdown is active, no element can be selected in the dropdown. Is there an alternative?

HTML:

<div id="btn1">
    <div class="btn-group dropup">
      <button type="button" class="btn btn-primary">Add 1 vector</button>
      <button type="button" class="btn btn-primary dropdown-toggle" data-toggle="dropdown">
        <span class="caret"></span>
        <span class="sr-only">Toggle Dropdown</span>
      </button>
      <ul class="dropdown-menu" role="menu" id="ajouter">
        <li><a href="#">1</a> </li>
        <li><a href="#">2</a> </li>
        <li><a href="#">3</a> </li>
        <li><a href="#">4</a> </li>
        <li><a href="#">5</a> </li>
    </ul>
   </div>
</div>

jQuery:

$('#ajouter a').on('click', function() {
    nombre_ajout = parseInt($(this).html());
    if (nombre_ajout > 1)
        $('#btn1 button').eq(0).html('Add ' + nombre_ajout +' vectors');
    else if (nombre_ajout == 1)
        $('#btn1 button').eq(0).html('Add ' + nombre_ajout +' vector');
});

Image:

screencap

possible duplicate of [How to prevent a click on a '#' link from jumping to top of page in jQuery](http://stackoverflow.com/questions/3252730/how-to-prevent-a-click-on-a-link-from-jumping-to-top-of-page-in-jquery) — JJJ, Jan 30 '15 at 10:59
Both are correct. (Although removing the href attribute has side effects like a different cursor on mouseover.) — JJJ, Jan 30 '15 at 17:15
Couldn't notice, because I had already changed the cursor in css! — jonathanGB, Jan 30 '15 at 17:29

score 9 · Accepted Answer · edited May 23 '17 at 11:33

9

You can try removing the "href" attribute all together on the anchors?

See this post on this: Valid to use <a> (anchor tag) without href attribute?

edited May 23 '17 at 11:33

Community

1
1

answered Sep 25 '14 at 22:08

EdwardM

1,116
11
20

I think it works, but I've added for semantic sake! Will get back to you shortly! – jonathanGB Sep 25 '14 at 22:21
Regarding navigating a web page using the keyboard (i.e. accessibility and Section 508 compliance in the USA)... It should be noted that removing the href attribute causes the anchor to literally do nothing when you press the key while it's highlighted. In other words, it breaks keyboard navigation. The href="javascript:void(0);" approach does not have this issue. – Vince Horst May 19 '17 at 19:17

zapoo · Answer 2 · 2015-03-07T08:25:02.050

5

Try to change with the code below. It prevents scroll to top when <li> clicked.

<li><a href="javascript:void(0);"> xyz </a></li>

edited Mar 07 '15 at 08:25

answered Mar 05 '15 at 20:50

zapoo

1,548
3
17
32

1

Code only answers can generally be improved by adding some explanation. – Jason Aller Mar 05 '15 at 22:56
The answer previously given worked. But thanks for finding another solution! – jonathanGB Mar 10 '15 at 15:50

Preventing scrolling when a nested Bootstrap Dropdown clicked

2 Answers2

Preventing scrolling when a nested Bootstrap Dropdown
clicked