0

誰か助けてくれませんか。私はチュートリアルhttp://tympanus.net/codrops/2010/06/02/smooth-vertical-or-horizo​​ntal-page-scrolling-with-jquery /を利用してスクロール方法を使用しています。しかし、私が見ることができない何らかの理由で、それは私にとってはうまくいきません。

私のHTMLファイルは次のようになります：

 <!doctype html>
<html>
<head>
    <title>Coming Soon - OneSG Buying Club</title>
    <meta name="viewport" content="initial-scale=1.0; minimum-scale=1, maximum-scale=1"/>

    <!--CSS Code Links-->
    <link href='http://fonts.googleapis.com/css?family=Open+Sans+Condensed:300,300italic,700' rel='stylesheet' type='text/css'/>
    <link rel = "Stylesheet" type = "text/css" href = "css/styles.css"/>

    <!--JS and JQuery Code Links-->
    <script type="text/javascript" src = "js/jquery-1.10.2.js"></script>
    <script type ="text/javascript" src = "js/jquery/easing.min.js"></script>
    <script type="text/javascript" src = "js/scripts.js"></script>
</head>

<body>
    <div id = "wrapper">
        <section id = "screen1">
            <div class = "pageNum">
                <p>1</p>
            </div>
            <h2>Coming Soon</h2>
            <div class = "vLine"></div>
            <div class = "hLine"></div>
            <div id = "next">
                <a href = "#screen2">
                    <img id = "nextR" src = "img/textH.png"/>
                    <img id = "arrowR" src = "img/arrowRight.png"/>
                </a>
            </div>
            <img id = "socket" src = "img/electric.png"/>
            <div class = "vLine2"></div>
            <div class = "hLine2"></div>
        </section>

        <section id = "screen2">
            <div id = "track"></div>
            <div id = "pageNum2">
                <p>2</p>
            </div>
            <div id = "transbox"></div>
            <div id = "transbox2"></div>
            <h2>This Website is a <span>placeholder for something</span> Amazing</h2>
            <aside>
                <img id = "router" src = "img/router.png"/>
                <div id ="next2">
                    <img id = "vNext" src = "img/textV.png"/>
                    <img id = "vArrow" src = "img/arrowDown.png"/>
                </div>
            </aside>
            <div id = "cable"></div>
            <div id = "cable2"></div>
        </section>

        <section id = "screen3">
            <div id = "trackbar"></div>
            <div id = "pageNum3">
                <p>3</p>
            </div>
            <div id = "transbox3"></div>
            <div id = "transbox4"></div>
            <div id = "cable3"></div>
            <div id = "cable4"></div>
            <div id = "cable5"></div>
            <p id = "moreinfo">More Info?</p>
            <div id = "next3">
                <img id = "arrow3" src = "img/arrowLeft.png"/>
                <img id = "text3" src = "img/textH.png"/>
            </div>
        </section>

        <section id = "screen4">
            <div id = "trackbar4"></div>
            <div id = "pageNum4">
                <p>4</p>
            </div>
            <div id = "transbox5"></div>
            <div id = "cable6"></div>
            <div id = "cable7"></div>
            <aside>
                <img id = "me" src = "img/illustration.png"/>
                <img id = "arrowup" src = "img/arrowUp.png"/>
            </aside>
            <p id = "contactus">Contact Us</p>
        </section>
    </div>
</body>
</html>

そして私のJavascriptは次のようになります：

    $(document).ready(function() {
    // Call the pageLayout function
    pageLayout();

    $('#next').bind('click',function(event) {
        var $anchor = $(this);

        $('html, body').stop().animate({
            scrollLeft: $(anchor.attr('href')).offset().left
        }, 1500, 'easeInOutExpo');

        event.preventDefault();
    });


});

// Set Width and Height of sections and place them
function pageLayout() {
    // Create variables to store width and height of screen
    var screenWidth = $(window).width();
    var screenHeight = $(window).height();
    var wrapperWidth = screenWidth * 2;
    var wrapperHeight = screenHeight * 2;

    // Set each section to the screen width and height
    $("#wrapper").css({'height': wrapperHeight + 'px', 'width': wrapperWidth + 'px'});
    $("#screen1").css({'height': screenHeight + 'px', 'width': screenWidth + 'px', 'left':'0', 'top':'0', 'position':'absolute'});
    $("#screen2").css({'height': screenHeight + 'px', 'width': screenWidth + 'px', 'left': screenWidth + 'px', 'top':'0', 'position':'absolute'});
    $("#screen3").css({'height': screenHeight + 'px', 'width': screenWidth + 'px', 'left': screenWidth + 'px', 'top': screenHeight + 'px', 'position':'absolute'});
    $("#screen4").css({'height': screenHeight + 'px', 'width': screenWidth + 'px', 'left':'0', 'top': screenHeight + 'px', 'position':'absolute'});

}

なぜそれが機能しないのか誰かが知っていますか???

4

1 に答える 1

1

この行で：

scrollLeft: $(anchor.attr('href')).offset().left

variable のつづりを間違え$anchorました。次のように変更します。

scrollLeft: $($anchor.attr('href')).offset().left

いずれにせよ、ブラウザの開発ツールの使用方法、特にブレークポイントの使用方法を学ぶことをお勧めします。これにより、どの変数が期待どおりに動作しないかを自分で確認できます。

于 2013-07-15T09:42:03.223 に答える