scrollLeft javaScript水平スクロールの問題

まあ私はスクロールした水平のウェブサイトを持っています。scrollLeft javaScript水平スクロールの問題

私は各ナビゲーションIDのアンカータグに水平にスクロールするために上部に固定されたナビゲーションを取得しようとしています。

ファイルにはJSFiddleがあります。次のように

コードスニペットは、次のとおりです。

$(document).ready(function(){ 
 
    
 
    $('.scrollPage').click(function() { 
 
     var anchor = String($(this).attr("href")).replace("#",""); 
 
     var selector = 'div[name="' + anchor + '"]'; 
 
     var e = $(selector); 
 
     var left = e.offset().left; 
 
     $('html, body').animate({scrollLeft: left }, 800); 
 
     return false; 
 
    }); 
 
});

body { 
 
    background:url(images/fill.jpg) #74beb2 repeat scroll; 
 
    font-size: 12px; 
 
    margin-top:0; 
 
    min-width:1140px; 
 
    overflow: scroll; 
 
    padding-top:0; 
 
    height:768px; 
 
} 
 

 
#container { 
 
    height:768px; 
 
    width:17000px; 
 
    float:left; 
 
    position:relative; 
 
} 
 

 

 
nav { 
 
    background:url(images/nav.png) no-repeat; 
 
    height:80px; 
 
    width:977px; 
 
    position:fixed; 
 
    margin-left:67px; 
 
    margin-top:10px; 
 
    z-index:100; 
 
} 
 

 
.navtype { 
 
    width:845px; 
 
    height:27px; 
 
    margin-left:130px; 
 
    margin-top:35px;  
 
} 
 

 
/*NAV*/ 
 

 
/*-------------------------------------------------*/ 
 

 
/*SECTIONING*/ 
 

 
#sectionone { 
 
    background:url(images/sectionone.jpg) no-repeat scroll; 
 
    height:768px; 
 
    width:1140px; 
 
    float:left; 
 
} 
 

 
#sectiontwo { 
 
    background:url(images/sectiontwo.jpg) no-repeat scroll; 
 
    height:768px; 
 
    width:622px; 
 
    float:left; 
 
} 
 

 
#sectionthree { 
 
    background:url(images/sectionthree.jpg) no-repeat scroll; 
 
    height:768px; 
 
    width:1140px; 
 
    float:left; 
 
} 
 

 
#sectionfour { 
 
    background:url(images/sectionfour.jpg) no-repeat scroll; 
 
    width:1238px; 
 
    height:768px; 
 
    float:left; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<body> 
 
<div id="container"> 
 
<nav><div class="navtype"><h2><a href="#sectionthree" class="scrollPage" name="about">ABOUT</a></h2><h2><a href="#sectionfive" class="scrollPage" name="films">FILMS</a></h2><h3><a href="mailto:[email protected]">CONTACT</a></h3><h3><a href="#sectioneleven" class="scrollPage">LODGING</a></h3><h4><a href="#sectionthirteen" class="scrollPage">TICKETS</a></h4></div></nav> 
 

 
<div id="sectionone"> 
 
</div> 
 

 
<div id="sectiontwo"> 
 
</div> 
 

 
<div id="sectionthree"> 
 
<div id="abouthead"> 
 
<div class="rule"></div> 
 
<h1>About</h1> 
 
<div class="rule"></div></div> 
 
<div class="aboutbox"> 
 
</div> 
 
<div id="abouttext"><p>The Stay Gold Movie Festival in Brooklyn, New York prides itself on bringing not only the classics when it comes to youth in revolt films, but also the spirit of the New York City life experience. The Films of The Wanderers, The Warriors, and The Outsiders are instant hits showing the comradery and friendship anyone would enjoy, not to mention the introduction of the good old "one-two" punch when it comes to taking out the pretty boys from the burbs. All in all if you want a heartfelt journey, filled with action, suspense, and good old greaer gang attitude, Stay Gold is the best for you.</p> 
 
</div> 
 
    </div> 
 
</div> 
 
</body>

出典

2012-01-31 Andrew Rutledge

さらに多くのコード（おそらくjsfiddle）を追加できますか？セレクタで何をしようとしているのかを正確に理解するのは難しいです。 – pseudosavant

あなたはコードがよく見えます。これを実行するとどうなりますか？エラーはありますか？ – ShankarSangoli

「何かが間違っています。私は詳細が大好き！ – epascarello