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

Share Improve this question Follow asked Mar 6, 2016 at 14:59 BlaineBlaine 34211 gold badge44 silver badges1919 bronze badges 3

• 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

Add a ment  | 

1 Answer 1

Sorted by: Reset to default 6

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.