Question

In my webpage I have multiple anchor tags and I have assigned them to scroll to the top of the page when clicked. How would I make them scroll up then also redirect to the page in the href, in that order?

JSFiddle – http://jsfiddle.net/TkdMJ/

HTML

<a href="javascript:void(0)" onClick="goToByScroll('translation_list')"  href="VideoPages/Azeri/Heydər Oğuzun1-ci hissə.html">
        <li>
      <img src="../Images/Article Images/GuliyevFace14.png" class="li-image" />
        <h3 class="li-header">Heydər Oğuzun Rəsul Quliyevlə Müsahibəsi - 29 İyul 2012, 1-ci hissə</h3>

         <p class="li-text">Yayımlanıb on Aug 1, 2012 - Rəsul Quliyev</p>
        <p class="li-text">Heydər Oğuzun Rəsul Quliyevlə müsahibəsi - 29 İyul 2012, 1-ci hissə Heydar Oguz's Interview with Rasul Guliyev on July 29, 2012, Part 1
 </p>
       </li>
         </a> 

Javascript

function goToByScroll(id){
        $('html,body').animate({scrollTop: $("#"+id).offset().top},'slow');
}

Answer 1

You have two href attributes on the link which would cause a problem. I would attach a jQuery click event to the anchor element and redirect after the animation finishes. You would also need to call preventDefault so that the link does not redirect by default.

$("#link").click(function(e) {
    $("body").animate({
        scrollTop: $("body").offset().top
    }, "slow", function() {
        alert("redirecting to " + $(e.target).attr("href"));
        window.location.href = $(e.target).attr("href");
    });

   e.preventDefault();
});

I updated the solution in this jsFiddle.