Adding AJAX function to anchor behavior but Keeping href for SEO

Question

Is it possible to have a link/button that will execute an AJAX/Jquery function to load new content but at the same time it contains a link to a page with that same specific content?

This is for SEO, and I am concerned that the crawler will be unable to properly index a sitemap.

Something like this but I am not sure:

<a href="mypage.html" onclick="javascript: loadAjaxContent()" > My page </a>

The overall goal is to create a very dynamic site with nice effects between the transition of one page and another. At the same time, I also want Search Engines to find my pages.

Answer 1

You need to use first prevent the default action to the tag. Easiest way is to use JQuery as seen below. I dont know the specific html element but lets assume you have one anchor tag on the page. First, once the document is loaded, bind the click event to the anchor. Then once the ancore is clicked you will prevent the default action from occuring. Then you can perform whatever action you desire.

$(document).ready(function()
{
    $('a').click(function(e)
    {
       e.preventDefault();
       //Perform ajax loading
    });
});