如何动画水平滚动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);

this is what you get.