Wordpress Javascript/jQuery not working on webkit

Question

I have installed the plugins Easy Smooth Scroll Links (ESSL) and Page Scroll to ID for wordpress however neither of them seem to work on webkit browsers. I have done some research and have found at least one viable solution but the plugin files are in minified form, so it's almost impossible for me to modify them without spending hours re-formatting (there is also the fact that a majority of the code looks to be too advanced for me to understand.)

If it is any help the site I am working on is http://design.mindgarden.me/ and the section in question is the circle/down arrow button. Upon clicking/pressing it, it should scroll the page down to the services section. (Works fine on Firefox, IE and presumably other non-webkit browsers but not on Chrome, Safari, etc.)

Anyway the main answer I am trying to get to here is (if this is a well known enough issue) if there is any known work around/fix or if there is an alternative plugin with the same functionality that you know of which works on webkit browsers.

I have already submitted a support ticket modernthemes (creator of the theme I am using as I had previously thought it was an issue on their side) however seeing as we are in different hemispheres I figured I would try to reach out to a wider audience. I have also checked the support forums for each plugin I mentioned, however there was no such topic posted and they seemed pretty inactive... also a search on wordpress for similar plugins only revealed hundreds of "scroll to top" clones which is not what I am looking for at the moment. And now that I think about it, I may as well post a thread about this on the official wordpress support forums...

Thank you in advance.

Ps. It says I need at least 10 reputation to post more than 2 links, so you will have to google for the plugins yourself.

Answer 1

You could just use something like this:

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

I found it here on CSS tricks, you can see a working example and inspect element to see how the markup looks. https://css-tricks.com/examples/SmoothPageScroll/ For incorporating into WordPress, you can simply add the code to your footer.php, or add the your main script file for you theme. Let me know if you have any questions, and I will help walk you through it.