Smooth-scrolling is not working on a Wordpress site

Question

I am honestly out of ideas since i have minded more or less everything implementing the following jquery smooth scroll plugin: https://github.com/kswedberg/jquery-smooth-scroll

i had it running on static sites but i try at the moment on a wordpress one and i get a jump instead of a "smooth scroll" all the time.

At the top of my template i have

<section id="uptothetop" class="slogan-box"></section>

and at the bottom i have

<a href="#uptothetop" class="icon-alone homebutton" title="Back to the start">
    <span aria-hidden="true" data-icon="&#xe011;"></span>
    <span class="screen-reader-text">Back to the start</span>
</a>

my js is enqueued

function theme_js() {
    if( !is_admin() ){
        wp_deregister_script( 'jquery' );
    }
    wp_enqueue_script( 'overturejs', get_template_directory_uri() . '/js/prelude.min.js', array(), null, false);
    wp_enqueue_script( 'mainjs', get_template_directory_uri() . '/js/main.min.js', array(), null, true);
}
add_action('wp_enqueue_scripts', 'theme_js');

inside the the main.js file jquery 1.11.0 and latest smooth scroll is loaded. the script is called with

$(document).ready(function() {
    $('#uptothetop').smoothScroll({
        speed:200
    });

if i hit the console and type: jQuery().smoothScroll i get a result, indicating the plugin is loaded properly.

function (options) {
    options = options || {};
    var opts = $.extend({}, $.fn.smoothScroll.defaults, options),
        locationPath = $.smoothScroll.filterPath(location.pathname);

    this
    .unbind('click.smoothscroll')
    .bind('click.smoothscroll', function(event) {
      var link = this,
          $link = $(this),
          exclude = opts.exclude,
          excludeWithin = opts.excludeWithin,
          elCounter = 0, ewlCounter = 0,
          include = true,
          clickOpts = {},
          hostMatch = ((location.hostname === link.hostname) || !link.hostname),
          pathMatch = opts.scrollTarget || ( $.smoothScroll.filterPath(link.pathname) || locationPath ) === locationPath,
          thisHash = escapeSelector(link.hash);

      if ( !opts.scrollTarget && (!hostMatch || !pathMatch || !thisHash) ) {
        include = false;
      } else {
        while (include && elCounter < exclude.length) {
          if ($link.is(escapeSelector(exclude[elCounter++]))) {
            include = false;
          }
        }
        while ( include && ewlCounter < excludeWithin.length ) {
          if ($link.closest(excludeWithin[ewlCounter++]).length) {
            include = false;
          }
        }
      }

      if ( include ) {

        if ( opts.preventDefault ) {
          event.preventDefault();
        }

        $.extend( clickOpts, opts, {
          scrollTarget: opts.scrollTarget || thisHash,
          link: link
        });

        $.smoothScroll( clickOpts );
      }
    });

    return this;
  }

the only reason i might think of is that the plugin has troubles with the wordpress adressformat? that host.local/testsite/#uptothetop`is missing a filename and an ending with html or php? Or is there another possible reason? anyone used a smooth scroll plugin on a wordpress site yet? or has anyone a slight idea what the reason for that misbehaviour is or even has a suggestion how to debug that thing further to track the root of the problem down? best regards ralf

Answer 1 · 2014-03-02T02:26:25Z

March 2, 2014 2:26am

I wrote this for smooth scrolling

    $('a[href^="#"]').on('click',function(e){
    e.preventDefault();

    var target = this.hash,
    $target = $(target);

$('html, body').stop().animate({
    'scrollTop':$target.offset().top - 64}, 900, 'swing', function () {
        window.location.hash = target;
    });
});

Any href with a hash smooth scrolls.

You can see it in action here: http://charlie.globotek.net

Site's near dev completion.

Answer 2 · 2014-03-07T15:45:02Z

March 7, 2014 3:45pm

Just posting up here that it is resolved.

Welcome to the Treehouse Community

Looking to learn something new?

Ralf Koller

Ralf Koller

Smooth-scrolling is not working on a Wordpress site

Ralf Koller

Ralf Koller

2 Answers

Matt Campbell

Matt Campbell

Zac Gordon

Zac Gordon