0
嗯，我有一個橫向滾動的網站。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>
你可以包含更多的代碼（也許是一個jsfiddle）？你很難準確理解你想要用你的選擇器做什麼。 – pseudosavant 2012-01-31 02:52:30
你的代碼看起來不錯。執行此操作時會發生什麼？任何錯誤？ – ShankarSangoli 2012-01-31 02:53:07
「有問題。」我喜歡細節！ – epascarello 2012-01-31 03:00:17