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]estival.com">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 2012-01-31 02:52:30

你的代码看起来不错。执行此操作时会发生什么？任何错误？ – ShankarSangoli 2012-01-31 02:53:07

“有问题。”我喜欢细节！ – epascarello 2012-01-31 03:00:17