I'm trying to implement skrollr-menu into my website. What I want it to do is scroll down to the very bottom when the button is clicked (which I've got working just fine. The problem is that no matter what I do, I cannot get it to go any slower than 500ms. I've tried changing the duration in the included code, like the description suggests, but that doesn't work. No matter what I do, whether changing the duration in the jQuery, or trying to force it through classes, it always stays at 500ms. As my page is about 18000px long, it's incredibly horrible to look at. How do i change it?
HTML
<a href="#slide-7" data-menu-top="18000" data-menu-duration="10000"><div class="trigger-scroll left">></div></a>
.....
<section id="slide-7" class="scroll-here">
<div class="hsContainer bottom"></div>
</section>
<!-- Includes -->
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<script>window.jQuery || document.write('<script src="parallax/js/vendor/jquery-1.9.1.min.js"><\/script>')</script>
<script src="parallax/js/imagesloaded.js"></script>
<script src="parallax/js/skrollr.js"></script>
<script src="parallax/js/skroller.menu.min.js"></script>
<script src="parallax/js/_main.js"></script>
JavaScript
skrollr.menu.init(s, {
//skrollr will smoothly animate to the new position using `animateTo`.
animate: true,
//The easing function to use.
easing: 'sqrt',
//Multiply your data-[offset] values so they match those set in skrollr.init
scale: 2,
//How long the animation should take in ms.
duration: function(currentTop, targetTop) {
//By default, the duration is hardcoded at 500ms.
return 10000;
//But you could calculate a value based on the current scroll position (`currentTop`) and the target scroll position (`targetTop`).
//return Math.abs(currentTop - targetTop) * 10;
},
//If you pass a handleLink function you'll disable `data-menu-top` and `data-menu-offset`.
//You are in control where skrollr will scroll to. You get the clicked link as a parameter and are expected to return a number.
handleLink: function(link) {
return 400;//Hardcoding 400 doesn't make much sense.
},
//By default skrollr-menu will only react to links whose href attribute contains a hash and nothing more, e.g. `href="#foo"`.
//If you enable `complexLinks`, skrollr-menu also reacts to absolute and relative URLs which have a hash part.
//The following will all work (if the user is on the correct page):
//http://example.com/currentPage/#foo
//http://example.com/currentDir/currentPage.html?foo=bar#foo
///?foo=bar#foo
complexLinks: false,
//This event is triggered right before we jump/animate to a new hash.
change: function(newHash, newTopPosition) {
//Do stuff
},
//Add hash link (e.g. `#foo`) to URL or not.
updateUrl: false //defaults to `true`.
});
The answer to my problem was .. of course .. a spelling error.
Note the file names in the included scripts.
<script src="parallax/js/skrollr.js"></script>
<script src="parallax/js/skroller.menu.min.js"></script>
<script src="parallax/js/_main.js"></script>
The middle script had an unexpected "e" in the name, wasn't causing any errors, but also wasn't loading the file and so the JavaScript function wasn't working at all.