Ariel Flesler scrollTo()

时间:2014-08-11 18:19:02

标签: jquery scrollto

您好,我正在尝试在网站上实现Ariel Flesler的scrollTo(),但似乎我太愚蠢而无法理解如何使用它。

这是代码

    <!DOCTYPE html>
    <head>
        <title>
            Penna 3d <!--da cambiare -->
         </title>
        <link href="assets/style/style.css" rel="stylesheet" >
    </head>
    <body>
        <div id="dws-top">
            <div class="wrapper">
            <div id="logo">
                <img src="#" alt="logo prodotto">
            </div>
            <nav>
                <ul>
                    <li><a href="#dws-slide" id="slide">Slide</a></li>
                    <li><a href="#dws-teaser" id="teaser">Teaser</a></li>
                    <li><a href="#dws-explain" id="explain">Spiegazione</a></li>
                    <li><a href="#dws-info" id="info">info</a></li>
                    <li><a href="#dws-footer" id="footer" >footer</a></li>
                </ul>
            </nav>
        </div>
    </div>
    <div id="dws-slide">

    </div>
    <div id="dws-teaser">

    </div>
    <div id="dws-explain">

    </div>
    <div id="dws-info">

    </div>
    <div id="dws-footer">
        <footer>
            <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
            <script src="assets/js/jquery.superscrollorama.js" type="text/javascript"></script>
            <script src="assets/js/TweenMax.min.js" type="text/javascript"></script>
            <script src="assets/js/jquery.scrollTo.min.js" type="text/javascript"></script>
            <script>
                $('#footer').on("click", function(){
                    $.scrollTo("#dws-footer");
                });
            </script>
        </footer>
    </div>
</body>
好吧,如果我点击链接没有发生任何事情,我真的尝试了一切(我认为),但我真的没办法让这个插件工作。

我也尝试过animatescroll插件,这实际上是正常工作,但是如果我在同一个链接上第二次点击它会回滚到原来的位置...... 有人可以帮帮我吗?

1 个答案:

答案 0 :(得分:0)

这是一个小伙伴:http://jsfiddle.net/vxx1echb/1/

您需要做的是在初始化方法中包含return false;。原生div锚点href覆盖了scrollTo方法。您也可以将该链接更改为只有href #(尽管它不重要,因为return false;无论如何都会覆盖默认行为,但只是为了澄清您的行为#39} ;不会通过href="#some-id"链接。

然后你必须将scrollTo方法传递给你想要滚动到的实际jQuery对象,并将持续时间作为第二个参数传递,在本例中为500(毫秒)。