Services smoothscroll not working

Hi team,

Thank you for this wonderful theme and support!

Smoothscroll doesn’t want to work when clicking on the Services link. The link works, just not the smooth scrolling function. It simply jumps down to the corresponding section.

Services Image
Service Link:
http://localhost:8888/clearanglestudios/service/#cyber

It works for all other anchor links on the same page though. Smoothscroll works in Sydney FP: Call to Action, as well as custom links for example: <a href="#cyber" class="smoothscroll">CLICK HERE</a>

I have looked high and low for a solution. I have applied the following Custom JS as per another thread:

jQuery(function($) {
  $('#site-navigation a[href*="#"], .button-wrapper a[href*="#"]').on('click',function (e) {
      var target = this.hash;
      var $target = $(target);
      if ( $target.length ) {
        e.preventDefault();
        $('html, body').stop().animate({
             'scrollTop': $target.offset().top - 70
        }, 900, 'swing');
      } 
  });
}

Nothing seems to bring our dear Services link’s smooth scrolling back to life, any ideas?

Site is not live yet unfortunately, so I can’t send you a link. Running Wordpress 4.7.2 and
Sydney Version: 1.34.

Any help would be greatly appreciated.

Hello @es101,

Please check this topic:

Please feel free to ask any other questions that you might have.

Kind Regards, Roman.

Hi @Roman,

Thank you for responding so quickly!

I have gone through that topic several times, unfortunately with no result to my issue.

All buttons and “written” links works fine with smoothscroll for instance:
<a href="#cyber" class=“smoothscroll”>CLICK HERE</a> works 100%.

The issue I am having is with the services link.

"Service link You can link your service to a page of your choice by entering the URL in this field"
https://www.dropbox.com/s/k2u23answqxrbl8/services_link_smoothscroll.jpg?dl=0

It jumps to the section, doesn’t scroll. Is there a way to apply the .smoothscroll class to the services custom link?

Hello @es101,

You can try to do this with jQuery.

  1. Please install and activate Insert Headers and Footers plugin that will allow you to insert JavaScript (jQuery) code.

  2. Go to your DashboardSettingsInsert Headers and Footers → add the following code to Scripts in Header section, and click Save button.

<script type='text/javascript'>
    jQuery(document).ready(function(){
        jQuery('.widget .service a').attr('class', 'smoothscroll');
    });
</script>

Please let me know if you need more help.

Kind Regards, Roman.

Hi @Roman

Thanks for that. I installed the “Insert Headers and Footers” plugin, added the code to the Header section and saved it. I cleared the cache as well, but unfortunately still doing the same thing. Below is video example.

All I can think is I broke something else along the way, though I have no idea what or where since smoothscroll is working for everything else. The “Lidar” button is a test, the “CLICK HERE” button is a test as well and all works.

Thoughts?

Hello @es101,

Can you please check if services links got .smoothscroll class?

Kind Regards, Roman.

Hi @Roman,

Sorry, where do I check that?

Hello @es101,

Please do a right click on a service link, click Inspect Element, and check if <a> element have .smoothscroll class. You should see something like <a class='smoothscroll'…

Kind Regards, Roman.

Hi @Roman,

It does not have the .smoothscroll class. Where would I apply the class exactly?

Thanks!

Hello @es101,

I have described how to add it in the post above, to be more exact, in my second post in this topic. But it doesn’t work on your website for some reason.

It looks like this issue requires some work on your website, this goes beyond our support policy. As an option, you can find a reputable freelancer on Upwork for this kind of service.

Kind Regards, Roman.

Hi @Roman,

Thank you for all your help. Just an update, there has since been a Sydney theme update, after updating the theme I went back and applied

<script type='text/javascript'>
    jQuery(document).ready(function(){
        jQuery('.widget .service a').attr('class', 'smoothscroll');
    });
</script>

to the Insert Headers and Footers Plugin like you said and the services smoothscroll started working!

Thanks again!

You are welcome @es101! :slight_smile:

Kind Regards, Roman.