scrollLeft javaScript horizontal scroll issue
Question
Well I have a horizontal website that scrolls left.
I'm trying to get the navigation which is fixed to the top to scroll horizontally to each nav ID's anchor tag.
Here's the JSFiddle for the file.
The code snippet is as follows:
$(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>
2 answers
solution1
0 2012-01-31 03:27:57
I don't think you are handling the anchor correctly. Your selector is just putting in the href of the <a> and I don't think that works with jQuery. I put together a sample jsfiddle that does work, but I strip the # and use the div[name="anchor"] selector.
solution2
0 2012-01-31 03:35:20
另外，您可能想使用一个标签，这样操作就不会被两个标签（html和body）捕获/执行。
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.