单击“链接”时阻止跳转到页面顶部

Question

I have been stuck on how to prevent jumping to the top of the page when clicking on a link that has parsing PHP data.

I have tried so many AJAX examples off the internet, but unfortunately with no success.

A link looks like this:

<a class="bottle" href="index.php?step=<?php echo$step; ?>&bottle=b0"><img class="bottle" src="images/b0.jpg" /></a>

...with there being 113 of these links, each staying on index.php?, but jumping to the top of the page when clicked.

A preview of the program is: http://www.mtschools.net/aurasoma

Answer 1

You just need to use the preventDefault(); method in javascript to stop the browser from following through with the anchor links href location.

<script type="text/javascript">
    var links = document.querySelectorAll('.bottle');
    for(var i = 0; i < links; i++){
        links[i].addEventListener('click', function(e){
            e.preventDefault();
            //alternatively return false;

            //the rest of the ajax code here.
        });
    }
</script>

Whatever ajax call you need to make can be done after //the rest of the ajax code here.