如何为水平滚动 html 设置动画

Question

我在网上看到你可以使用底部的代码来制作水平链接的动画（底部的小提琴演示）。我是 html 的初学者，并希望在具有如下链接的上下文中使用它：

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

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

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

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

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

任何人都可以引导我如何？
谢谢

Answer 1

你需要锚元素，如

<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);

这就是你得到的。