Ну, у меня есть горизонтальный веб-сайт, который прокручивается влево.
Я пытаюсь получить навигацию, которая фиксируется наверху, чтобы прокрутить по горизонтали до тега привязки каждого навигационного идентификатора.
Вот 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:info@staygoldfilmfestival.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>