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>

<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;
}

回答1:

Your second .back onclick is never firing.

It doesn't work either time (as an a or span) - when it's an a, the default click will fire which will take you to the top.

This is because when you call $('.back').on('click'..) there isn't a .back element to wire up to as you've not yet added that class to your back button.

You need to use event delegation: https://stackoverflow.com/a/1688293/2181514

Change your event wire up to:

$("document").on("click", ".back", function....

which will then pick up dynamically changed classes

回答2:

I doubt if your click event on .back is registered at all since when event is bound, .back does not exist. Hence its as good as a click on link which has no href.

You need to delegate click on .back to the document. This delegation is needed because you are adding the back class dynamically.

 $(document).on('click','.back', function(e){
        e.preventDefault();
        $('.items').fadeOut(300);
        $('.category').html(response).delay(400).fadeIn(300);
        $('#nav').html('CATEGORIES').removeClass('back');

    });

回答3:

What you should do in html5, is use an anchor tag without the href attribute. In CSS you can use cursor: pointer to compensate for that. Then in JavaScript there's suddenly no need anymore for event.preventdefault

回答4:

A hacky solution is to set href="#/" on an anchor tag, which would work. However, using anchor tags where they are not needed (if you use <a> there should exist some clickable link) is not good practice for SEO.

Also, you could use e.preventDefault(), but use it on all functions, not only on back click.

However, the better practice is to use <input type="button" />, you eliminate those jumping problems and do better SEO.

来源：https://stackoverflow.com/questions/37964120/how-to-prevent-a-page-from-jumping-to-top-when-showing-or-hiding-elements-using

标签

javascript

jquery

html

css3

fadein