How to prevent a page from jumping to top when showing or hiding elements using jQuery fade option

There are many questions on this and I have tried them. WHAT I AM TRYING TO DO I am using jQuery fadeIn and fadeOut options to hide divs and show a list using the jquery below but the page keeps jumping to the top. The list that will be displayed is dynamic. I tried with e.preventDefault(); and return false; but of no use. I tried changing anchor tags to span tags but then the second onClick function doesn't work. Is this because my content length is dynamic which is making it look like a jump or is it a real jump? Thanks in advance. HTML <div id="action_bar"> <div id="cart"><i class="fa fa-shopping-cart" aria-hidden="true"></i><div class="total">20</div></div> <a href="" id="nav">CATEGORIES</a> <div id="filter"><i class="fa fa-filter" aria-hidden="true"></i><div class="total">1</div></div> </div> <div id="content"> <div id="category1" class="category" data-categories="SPL"> <img src="images/c_w.png"><div class="category_description">Chef's Special</div> </div> <div id="category2" class="category" data-categories="LCH"> <img src="images/l_w.png"><div class="category_description">Lunch</div> </div> <div id="category3" class="category" data-categories="SNK"> <img src="images/s_w.png"><div class="category_description">Snacks</div> </div> <div id="category4" class="category" data-categories="DNR"> <img src="images/d_w.png"><div class="category_description">Dinner</div> </div> <ul class="items"> <!-- Menu List --> </ul> </div> JS <script type="text/javascript"> $(document).ready(function(){ $('body').on('click', '.category', function(){ var category = $(this).data('categories'); //alert(category); $('.category').fadeOut(300); $.ajax({ type: "POST", url: "./assets/listproducts.php", data: {cat: category}, cache: false, success: function(response){ //console.log(response); $('#nav').html('<- BACK').addClass('back'); $('.items').html(response).delay(400).fadeIn(300); } }); }); $('.back').on('click', function(e){ $('.items').fadeOut(300); $('.category').html(response).delay(400).fadeIn(300); $('#nav').html('CATEGORIES').removeClass('back'); e.preventDefault(); }); }); </script> CSS ul.items { padding:0; margin:0; display:none; }