javascript - 如何动画水平滚动html

Question

我在网上看到您可以使用底部的代码为水平链接设置动画(底部的 fiddle 演示)。我是 html 的初学者，想在具有如下链接的上下文中使用它:

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

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

动画网页水平滚动到 anchor 。这是我想要执行此操作的代码:

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

http://jsfiddle.net/qS2Ke/1/

谁能告诉我怎么做？
谢谢

Answer 1

你需要像这样的 anchor 元素

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

和目标元素如

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

比使用这个 jquery

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

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

this is what you get.