jQuery滚动效果不想工作

Question

我想知道是否有人可以帮助我。 我正在使用教程http://tympanus.net/codrops/2010/06/02/smooth-vertical-or-horizontal-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'});

}

有人知道为什么它不起作用吗？？？

Answer 1

在这行上：

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

您拼写了变量$anchor 。 更改为：

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

无论哪种方式，我都建议您学习如何使用浏览器的开发工具，尤其是如何使用断点，以便可以检查自己哪些变量表现不佳。

jQuery滚动效果不想工作

问题描述

1 个解决方案

解决方案1
1 2013-07-15 09:42:03

jQuery滚动效果不想工作

问题描述

1 个解决方案

解决方案1 1 2013-07-15 09:42:03

解决方案1
1 2013-07-15 09:42:03