如何为水平滚动HTML设置动画 [英] How to animate horizontal scroll html

问题描述

我在网上看到，您可以使用底部的代码来制作水平链接的动画(底部的小提琴演示).我有些是html的初学者，并且想在具有如下链接的上下文中使用它:

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.net/qS2Ke/1/

有人可以指导我如何做吗?
谢谢

can anybody walk me through how?
Thank you

推荐答案

您需要锚点元素

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

和目标元素，例如

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

比使用此jQuery

than using this jquery

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

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

这就是您得到的.

这篇关于如何为水平滚动HTML设置动画的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！