Question

我尝试使用JQuery和Easing插件动画滚动页面。每当页面的scrollTop达到1时，我希望页面顺利滚动到具有锚名称home的div。

以下是我使用的代码：

<html>
    <head>
        <title>Advanced template - beta .01</title>
        <link rel="stylesheet" type="text/css" href="css/main.css">
        <link rel="stylesheet" type="text/css" href="css/header.css">
        <link rel="stylesheet" type="text/css" href="css/body.css">
        <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
        <script src="http://cdnjs.cloudflare.com/ajax/libs/jquery-easing/1.3/jquery.easing.min.js"></script>
    </head>

    <body>
        <header>
            <div id="header_container">
                <div class="menuLogo">
                    <img id="logo" src="img/desygn%20logo%20website.png">
                </div>
                <div class="menuItem" href="#home">Home</div>
                <div class="menuItem">Over</div>
                <div class="menuItem">Contact</div>

                <div id="mobile_menu_button">

                </div>
            </div>
        </header>

        <div id="body_container">
            <div id="banner_container">
                <img id="banner" src="img/banner_website.png">
            </div>

            <div id="content_container">
                <div name="home" id="home_container">

                </div>
            </div>
        </div>
    </body>
</html>

$(window).on('scroll', function () {
    var scrollTop = $(window).scrollTop();
    if (scrollTop == 1) {
        var $toElement = $("home");
        var toPosition = $toElement.position().top;

        $("body,html").animate({
            scrollTop : toPosition
        },2000,"easeOutExpo");
    }
});

（CSS不包括在内，虽然在JSFiddle中，但仅限于可见度）

这里是JSFiddle

当scrollTop大于0时，尝试在JQuery中设置滚动动画

0 个答案: