Hello. I'm trying to use the Jquery ScrollTo plugin but am having problems actually getting it working. I am using ScrollTo and LocalScroll. Through troubleshooting I've determined the problem lies in getting the document ready. I've tried to follow his code, but am lost. I've got the anchors working, I just need help getting them to function in the way the Jquery intends. Any help would be greatly appreciated.
Thank you!
- jQuery(function( $ ){
/**
* Most jQuery.localScroll's settings, actually belong to jQuery.ScrollTo, check it's demo for an example of each option.
* @see http://flesler.demos.com/jquery/scrollTo/
* You can use EVERY single setting of jQuery.ScrollTo, in the settings hash you send to jQuery.LocalScroll.
*/
// The default axis is 'y', but in this demo, I want to scroll both
// You can modify any default like this
$.localScroll.defaults.axis = 'y';
// Scroll initially if there's a hash (#something) in the url
$.localScroll.hash({
target: '#content', // Could be a selector or a jQuery object too.
queue:true,
duration:1500
});
/**
* NOTE: I use $.localScroll instead of $('#navigation').localScroll() so I
* also affect the >> and << links. I want every link in the page to scroll.
*/
$.('#navigation').localScroll({
target: '#content', // could be a selector or a jQuery object too.
queue:true,
duration:1000,
hash:true,
onBefore:function( e, anchor, $target ){
// The 'this' is the settings object, can be modified
},
onAfter:function( anchor, settings ){
// The 'this' contains the scrolled element (#content)
}
});
});
- <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>Richard Swenor</title>
<link href="global.css" type="text/css" rel="stylesheet" />
<script type="text/javascript" src="scripts/jquery-1.4.2.min.js"></script>
<script type="text/javascript" src="scripts/jquery.localScroll-1.2.7/jquery.localscroll-min.js"></script>
<script type="text/javascript" src="scripts/jquery.localScroll-1.2.7/jquery.scrollTo-min.js"></script>
<script type="text/javascript" src="scripts/init.js"></script>
</head>
<body>
<div id="container">
<!-- Navigation Begins -->
<div id="navigation">
<p id="navigation"> MY NAME IS
<a href="#" id="richardswenor">RICHARD SWENOR</a>.
WHILE IN SCHOOL AT
<a target="_blank" href="http://www.grde.ferris.edu">FERRIS STATE UNIVERSITY</a>
I MADE
<a href="#goodchoices">GOOD CHOICES</a>
, A
<a href="#newsletter">NEWSLETTER</a>
, AND WORKED WELL WITH PEOPLE. I LEARNED ABOUT AN
<a href="#architect">ARCHITECT</a>
AND ISSUES REGARDING
<a href="#excess">EXCESS</a>. I’VE CREATED A BRAND DOCUMENT FOR A
<a href="#specialtyshop">SPECIALTY SHOP</a>
AND A
<a href="#calendar">NONCONVENTIONAL CALENDAR</a>
AS WELL AS MY
<a href="#personalidentity">PERSONAL IDENTITY</a>
AND WORKED ON A CAMPAIGN ABOUT
<a href="#eatmore">EATING MORE PICKLES</a>
. I’M CONNECTED AND CAN BE CONTACTED BY
<a href="mailto:richard.swenor@gmail.com">E-MAIL</a>
,
<a target="_blank" href="http://twitter.com/jagddoga">TWITTER</a>
,FACEBOOK,
<a target="_blank" href="http://richardswenor.tumblr.com">TUMBLR</a>
, AND
<a target="_blank" href="http://www.linkedin.com/pub/richard-swenor/1a/1bb/77a">LINKEDIN</a>. </br>
I HAVE A RESUME AND AM LOOKING FORWARD TO WORKING FOR A COMPANY WHERE I HAVE TO WORK HARD EVERY DAY. I PRIDE MYSELF ON BEING SELF MOTIVATED AND HAVING A STRONG WORK ETHIC.
MY GREATEST MOMENT AS A STUDENT DESIGNER WAS MUSTERING THE COURAGE TO SPEAK TO STEVE FRYKHOLM, BUT LOOK FORWARD TO 1UPING THIS WITH MORE ADVENTOUROUS ENDEVERS.
</p>
</div>
<!-- Navigation Ends -->
<!-- Content Begins -->
<div id="content">
<div class="section">
<ul>
<li class="sub" id="goodchoices">
<h2> Good Choices</h2>
<img src="images/placeholder.jpg" alt="Good Choices" />
<p> Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Suspendisse et turpis sed metus fermentum pellentesque. Vestibulum auctor neque ac nunc elementum malesuada. Praesent non est sed libero vestibulum consectetuer. Sed vehicula. Vivamus quis tellus sit amet erat ultrices luctus. Fusce a ligula. Fusce viverra libero vitae velit. Aenean bibendum nibh non lorem. Suspendisse quis velit. Integer sit amet lacus. Curabitur tristique. Morbi eu lectus. Vestibulum tristique aliquam quam. Sed neque.</p>
<p> <a href="#richardswenor">^ Top</a></p>
<p> <a href="#newsletter"> > Next </a></p>
</li>
<li class="sub" id="newsletter">
<h2> Across the Board Newsletter</h2>
<img src="images/placeholder.jpg" alt="Newsletter" />
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Suspendisse et turpis sed metus fermentum pellentesque. Vestibulum auctor neque ac nunc elementum malesuada. Praesent non est sed libero vestibulum consectetuer. Sed vehicula. Vivamus quis tellus sit amet erat ultrices luctus. Fusce a ligula. Fusce viverra libero vitae velit. Aenean bibendum nibh non lorem. Suspendisse quis velit. Integer sit amet lacus. Curabitur tristique. Morbi eu lectus. Vestibulum tristique aliquam quam. Sed neque.</p>
<p> <a href="#richardswenor">^ Top</a></p>
<p> <a href="#architect"> > Next </a></p>
</li>
<li class="sub" id="architect">
<h2> Architect Poster</h2>
<img src="images/placeholder.jpg" alt="Richard Neutra" /><p>We were randomly given an architect to do a poster about. I was given Richard Neutra and choose to focus on the Lovell House. This house was the first steel framed house in America and was build with the principles of the International Style in mind, so I choose to take those principles into consideration when making this poster. I also used the typeface Neutraface because it was a typeface designed by Richard Neutra himself. This poster is meant to be on display at a large scale of __ by __.</p>
<p> <a href="#richardswenor">^ Top</a></p>
<p> <a href="#excess"> > Next </a></p>
</li>
<li class="sub" id="excess">
<h2> Excess Magazine Spread</h2>
<img src="images/placeholder.jpg" alt="Excess" />
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Suspendisse et turpis sed metus fermentum pellentesque. Vestibulum auctor neque ac nunc elementum malesuada. Praesent non est sed libero vestibulum consectetuer. Sed vehicula. Vivamus quis tellus sit amet erat ultrices luctus. Fusce a ligula. Fusce viverra libero vitae velit. Aenean bibendum nibh non lorem. Suspendisse quis velit. Integer sit amet lacus. Curabitur tristique. Morbi eu lectus. Vestibulum tristique aliquam quam. Sed neque.</p>
<p> <a href="#richardswenor">^ Top</a></p>
<p> <a href="#specialtyshop"> > Next </a></p>
</li>
<li class="sub" id="specialtyshop">
<h2> Specialty Shop</h2>
<img src="images/placeholder.jpg" alt="Specialty Shop" />
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Suspendisse et turpis sed metus fermentum pellentesque. Vestibulum auctor neque ac nunc elementum malesuada. Praesent non est sed libero vestibulum consectetuer. Sed vehicula. Vivamus quis tellus sit amet erat ultrices luctus. Fusce a ligula. Fusce viverra libero vitae velit. Aenean bibendum nibh non lorem. Suspendisse quis velit. Integer sit amet lacus. Curabitur tristique. Morbi eu lectus. Vestibulum tristique aliquam quam. Sed neque.</p>
<p> <a href="#richardswenor">^ Top</a></p>
<p> <a href="#calendar"> > Next </a></p>
</li>
<li class="sub" id="calendar">
<h2> Nonconventional Calendar</h2>
<img src="images/placeholder.jpg" alt="Calendar" />
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Suspendisse et turpis sed metus fermentum pellentesque. Vestibulum auctor neque ac nunc elementum malesuada. Praesent non est sed libero vestibulum consectetuer. Sed vehicula. Vivamus quis tellus sit amet erat ultrices luctus. Fusce a ligula. Fusce viverra libero vitae velit. Aenean bibendum nibh non lorem. Suspendisse quis velit. Integer sit amet lacus. Curabitur tristique. Morbi eu lectus. Vestibulum tristique aliquam quam. Sed neque.</p>
<p> <a href="#richardswenor">^ Top</a></p>
<p> <a href="#personalidentity"> > Next </a></p>
</li>
<li class="sub" id="personalidentity">
<h2> Personal Identity</h2>
<img src="images/placeholder.jpg" alt="Personal ID" />
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Suspendisse et turpis sed metus fermentum pellentesque. Vestibulum auctor neque ac nunc elementum malesuada. Praesent non est sed libero vestibulum consectetuer. Sed vehicula. Vivamus quis tellus sit amet erat ultrices luctus. Fusce a ligula. Fusce viverra libero vitae velit. Aenean bibendum nibh non lorem. Suspendisse quis velit. Integer sit amet lacus. Curabitur tristique. Morbi eu lectus. Vestibulum tristique aliquam quam. Sed neque.</p>
<p> <a href="#richardswenor">^ Top</a></p>
<p> <a href="#eatmore"> > Next </a></p>
</li>
<li class="sub" id="eatmore">
<h2> Eat More Pickles</h2>
<img src="images/placeholder.jpg" alt="Eat More" />
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Suspendisse et turpis sed metus fermentum pellentesque. Vestibulum auctor neque ac nunc elementum malesuada. Praesent non est sed libero vestibulum consectetuer. Sed vehicula. Vivamus quis tellus sit amet erat ultrices luctus. Fusce a ligula. Fusce viverra libero vitae velit. Aenean bibendum nibh non lorem. Suspendisse quis velit. Integer sit amet lacus. Curabitur tristique. Morbi eu lectus. Vestibulum tristique aliquam quam. Sed neque.</p>
<p> <a href="#richardswenor">^ Top</a></p>
</li>
</ul>
</div>
</div>
<!-- Content Ends -->
</div>
</body>
</html>