Question

您好我有一些问题，让一些div元素滚动到视图从溢出自动在sperate div到索引链接（可能没有解释得太好！）理想情况下我希望这个动画流畅

我尝试了一些使用偏移和位置的技术，但是它们似乎不稳定，我想知道这样做的最佳方法是什么，如果有帮助我使用jquery

示例代码：

http://jsbin.com/ifefix/11/edit#javascript,html,live

Answer 1

链接到有效的解决方案：http://jsfiddle.net/pioul/N5bWm/2/

以下是摘要：

<强> HTML：

<div id="wrapper">
    <ul>
        <li><a href="#one">one</a></li>
        <li><a href="#two">two</a></li>
        <li><a href="#three">three</a></li>
    </ul>
    <div id="container">
        <div id="one">1</div>
        <div id="two">2</div>
        <div id="three">3</div>
    </div>
</div>

<强> jQuery的：

// bind an action to the click event on your links
$("ul > li > a").bind("click", function(e){
    e.preventDefault();

    // get the "block" offset from the top of the #container div (and add to it the actual scroll of the div)
    var scrollto = $($(this).attr("href")).position().top + $("#container").scrollTop();

    // stop previous non-ended animations, and scroll smoothly to the new "block"
    $("#container").stop(true).animate({ scrollTop: scrollto }, 1000);
});

<强> CSS：

唯一重要的属性是position: relative #container，以便从$().position()获取准确的值。

使用溢出文本动画滚动

1 个答案: