单击链接时防止跳转到页面顶部

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 .

Answer 2

User a link without HREF, and then set CSS cursor to be pointer either with jQuery or CSS.

This to make clickable sort of link. Not entire solution to your problem.

But you could also have an anchor with the name, so when you click, you will move to the anchor and perhaps stay on the anchor, instead of the top of the page?

<script>
    $().ready(function() {
        ('#link').css('cursor', 'pointer');
    });
</script>

<a id="link">Some Text</a>