Question

I’m having a problem after adding button on my star rating. Every time when I click on the star, my page getting jumpy and scroll to the top. How can I prevent this behavior?

My code:

$(document).ready(function(){
        var rate=null;
        $(".one-star, .two-stars, .three-stars, .four-stars, .five-stars").click(function() {
             rate = $(this).html();
             $("#submit_rating").fadeIn("slow");
             $("#current_rating").width(rate*30);
        });
        $('#submit_rating').click(function(){
                $.ajax({data: ({ action: 'save_rating', rating: rate, listing_id: <?php echo $id; ?>}), success: function() { window.location.href = '<?php echo $this->escape(URL); ?>'; }});
                return false;
        });
    });

you can see my problem here: http://duniakita.org/starrating/

Answer 1

You might need to use e.preventDefault on the *-stars click.

$(".one-star, .two-stars, .three-stars, .four-stars, .five-stars").click(function(e) {
    rate = $(this).html();
    $("#submit_rating").fadeIn("slow");
    $("#current_rating").width(rate*30);
    e.preventDefault();
});