On page scroll not working

Question

I have followed the instructions to set up on page scrolling on my Wordpress site: http://www.thepetedesign.com/demos/onepage_scroll_demo.html but it doesn't seem to be working.

page HTML

<div class="main">
<section>[new_royalslider id="2"]</section>
<section>...</section>
</div>

header.php

<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
<script type="text/javascript" src="http://www.dawaf.co.uk/creative-mapping/wp-content/themes/wpbootstrap/js/jquery.onepage-scroll.js"></script>
<script type="text/javascript" src="http://www.dawaf.co.uk/creative-mapping/wp-content/themes/wpbootstrap/js/jquery.onepage-scroll.min.js"></script>
<script type="text/javascript" src="http://www.dawaf.co.uk/creative-mapping/wp-content/themes/wpbootstrap/js/jquery.cookie.js"></script>

<script type="text/javascript">
$(".main").onepage_scroll();
</script>

I've had a look at inspect element and there are no error messages. The scroll bar doesn't seem to work at all anymore.

See link

Answer 1

You have imported both the jquery.onepage-scroll.js , but also its minified version - jquery.onepage-scroll.min.js . Don't include both versions - it is likely creating a Javascript error.

Also, before you run jQuery code, wrap it in this code:

$( document ).ready(function() {
  $(".main").onepage_scroll();      
});

This is because it is likely the element classed as main has not rendered to the DOM yet, so it doesn't exist when the onepage_scroll() function is called.

Last potential problem is that I don't see your stysheet - is '.main' even large enough to take multiple pages of the browser?