1

I have been asked to take a HTML website and develop a Wordpress theme out of it. The website uses SmoothScroll so when a button in the footer is clicked, it scrolls nicely to the top of the page. Except now it is in Wordpress, I click the button and it just reloads the page at siteurl.com/#about

The jquery in the .js include (as well as a smoothscroll.js include) was:

$(function() {
        'use strict';

        $('.scroll').bind('click', function(event) {
            var $anchor = $(this);
            var headerH = $('#navigation').outerHeight();
            $('html, body').stop().animate({
                scrollTop : $($anchor.attr('href')).offset().top - headerH + "px"
            }, 1200, 'easeInOutExpo');

            event.preventDefault();
        });
    });

And i changed this to put in non-conflict or whatever it is you call it:

jQuery(document).ready(function( $ ) {
$(function() {
        'use strict';

        $('.scroll').bind('click', function(event) {
            var $anchor = $(this);
            var headerH = $('#navigation').outerHeight();
            $('html, body').stop().animate({
                scrollTop : $($anchor.attr('href')).offset().top - headerH + "px"
            }, 1200, 'easeInOutExpo');

            event.preventDefault();
        });
    });
});

There are also a couple of other jquery effects that aren't working but jquery is working because some things are ie. toggle to display map etc..

Any suggestions? Could it just be the way it is loading the URL with the slash in between?

Thanks.

1
  • 2
    Voted to move this to stackoverflow.com as it is better suited there :-) Commented Nov 29, 2014 at 11:22

1 Answer 1

1

Thanks to CSS Tricks, I changed the existing SmoothScroll code that came with the site to the following which worked:

$(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;
      }
    }
  });
});

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.