Smooth scroll plugin not allowing me to scroll dow

Question

I added in the github plugin for the smooth scroll effect.

github.com/simov/simplr-smoothscroll

I added in the call outs for the effect:

<script src="http://cdnjs.cloudflare.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
<script src="http://cdnjs.cloudflare.com/ajax/libs/jquery-mousewheel/3.0.6/jquery.mousewheel.min.js"></script>
<script src="http://simov.github.io/simplr-smoothscroll/lib/jquery.simplr.smoothscroll.js"></script>

Then I added this code for the effect:

$(function () { $.srSmoothscroll() });

After I did this, my page no longer scrolls down. It only scrolls up. Why is this not functioning correctly?

The site I added this on is this page from the site:

http://realtorcatch.com/test_index

I am wanting it to model after:

http://www.templatemonster.com/demo/51054.html

On githubs site, it says the usage is this:

$(function () {
 $.srSmoothscroll({
    // defaults
    step: 55,
    speed: 400,
    ease: 'swing',
    target: $('body'),
    container: $(window)
  })
})

It does not help my situation though.

Does anyone have any ideas to why this is not scrolling down?

Answer 1

I had the same problem with Zurb's Foundation Framework and the standard settings from $.srSmoothscroll() change body { height:100% } in your CSS file to body { height: auto }. This fixed the issue for me on chrome47 (win7/osX 10.9). Or change the target option parameter to use a wrapper div:

$.srSmoothscroll({
    target: $('wrapper')
});

Answer 2

If you are on WordPress why don't you just download a plugin like this: https://wordpress.org/plugins/wp-smoother/

And see if it works, if not it's a theme / jQuery conflict issue

Answer 3

Looks like your plugin is catching up the scrollbar. Instead of a plugin for that, you can easily achieve it using this snippet:

$(function() {
  $('a[href*=#]:not([href=#])').click(function() {
    if (location.pathname.replace(/^\//,'') == this.pathname.replace(/^\//,'') && location.hostname == this.hostname) {
      var target = $(this.hash);
      target = target.length ? target : $('[name=' + this.hash.slice(1) +']');
      if (target.length) {
        $('html,body').animate({
          scrollTop: target.offset().top
        }, 1000);
        return false;
      }
    }
  });
});

More details at Smooth Scrolling.