I saw online that you could use the code at the bottom to animate a horizontal link (fiddle demo at the bottom). I am somewhat of a beginner to html, and would like to use this in the context of having an a link such as the following:

<a href="#nav">click this link</a>

<a name="nav" class="testing">anchor</a>

animate the webpage scrolling horizontally to the anchor. Here is the code with which I would like to do this:

function goToByScrollHoriz(id){
    $('html,body').animate({
        scrollLeft: $("#"+id).offset().left
    },'slow');
}

/

can anybody walk me through how?
Thank you

I saw online that you could use the code at the bottom to animate a horizontal link (fiddle demo at the bottom). I am somewhat of a beginner to html, and would like to use this in the context of having an a link such as the following:

<a href="#nav">click this link</a>

<a name="nav" class="testing">anchor</a>

animate the webpage scrolling horizontally to the anchor. Here is the code with which I would like to do this:

function goToByScrollHoriz(id){
    $('html,body').animate({
        scrollLeft: $("#"+id).offset().left
    },'slow');
}

http://jsfiddle/qS2Ke/1/

can anybody walk me through how?
Thank you

• javascript
• jquery
• html
• css

• Have you tried anything? – Roko C. Buljan Commented Mar 6, 2016 at 15:01
• @RokoC.Buljan yes, but I'm so lost i don't even know how to describe it. I've pretty much tried replacing the "id" in the original code with "nav", then tried creating another tag and surrounding both links with divs, but none of that has done anything – Blaine Commented Mar 6, 2016 at 15:04
• 1 @Blaine This is a simple approach of how you can do this: jsfiddle/qS2Ke/22 – marcelo2605 Commented Mar 6, 2016 at 15:10

1 Answer 1

You need anchor elements like

<a href="#d1"> d1 </a>

and target elements like

<div class="placeholder" id="d1">

than using this jquery

function horizAnim(event) {
  event.preventDefault();
  $('html,body').animate({
    scrollLeft: $(this.hash).offset().left
  }, 'slow');
}

$("a").on("click", horizAnim);

this is what you get.