jquery滾動效果不想工作

我想知道是否有人能幫助我。我正在使用教程http://tympanus.net/codrops/2010/06/02/smooth-vertical-or-horizontal-page-scrolling-with-jquery/來使用它們的滾動方法。但由於某些原因，我看不到，它不適合我。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'}); 

}

有誰知道爲什麼它不工作？？？

來源

2013-07-15 user2482793

在此行中：

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

你拼寫錯誤的變量$anchor。將其更改爲：

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

無論哪種方式，我建議你去學習如何使用瀏覽器的開發工具，尤其是如何使用斷點，所以你可以檢查自己是什麼變量不表現爲你所期望。

來源

2013-07-15 09:42:03 nirazul

都能跟得上看起來沒事 – user2482793

$錨！==錨 – nirazul

羅仍然不希望工作 – user2482793

jquery滾動效果不想工作

回答

相關問題