How to make smooth scrolling occur on front page?

Homepage › Community Forums › Aspire Theme Support › How to make smooth scrolling occur on front page?

Tagged: ,

Viewing 6 posts - 1 through 6 (of 6 total)
  • Author
    Posts
  • September 24, 2019 at 12:36 am #23375
    SavvyPro
    Customer

      I just purchased the Aspire Pro theme and I used the following code to create a .js file and I enqueued it in the front-page.php file, but I keep getting errors.

      Here is the code I am using:

      jQuery(document).ready(function ($) {
    "use strict";
    
    //SavvyPro Custom Scroll to ID Script
    
    $('a[href*="#"]').on('click', function(e) {
        e.preventDefault();
        
        $('html, body').animate(
            {
                scrollTop: $($(this).attr('href')).offset().top,
            },
            500,
            'linear'
        );
    });
});
</script>
      September 24, 2019 at 11:50 pm #23377
      Wes
      Moderator

        Do you have any other code that loads JS files? (Plugins, Custom code, etc)

        Sometimes this happens on any site or theme that uses multiple js files or links to multiple js files which could cause conflicts.

        Can you tell me where you got the code from so I can see how it’s set up exactly?

        September 25, 2019 at 12:23 am #23378
        SavvyPro
        Customer

          I do not have any other custom code or plugins that load JS files that I am aware of.

          I got this code from Victor Font who is a Moderator on the StudioPress forums.

          Here is a link to that post in the StudioPress forum: https://studiopress.community/topic/custom-javascript-scroll-to-id-all-of-a-sudden-stopped-working/

          Also, here is the website that I am experiencing these issues with:

          https://devsite2.savvyprosolutionsllc.com/

          Here is the enqueue code I am using in the front-page.php file for this script:

          /* SavvyPro Custom Smooth Scroll to ID

function savvypro_adding_scripts() {
 
	wp_enqueue_script( 'savvypro-scrollTo-id-script', get_stylesheet_directory_uri() . '/js/savvypro-scrollTo-id.js', array( 'jquery' ), '1.0.0', true );
	
	wp_enqueue_script('savvypro_scrollTo_id_script');
}
  
add_action( 'wp_enqueue_scripts', 'savvypro_adding_scripts' ); 
<!--formatted--><!--formatted--><!--formatted-->

          Here is the error I keep getting showing up in Chrome Developer:

          September 25, 2019 at 12:33 am #23379
          SavvyPro
          Customer

            Not sure what happened there, again, here is the error:

            https://photos.app.goo.gl/vBdYPyRUymEnJhFy8

            September 25, 2019 at 2:33 am #23380
            Wes
            Moderator

              Unfortunately, I’m not sure what’s causing the issue. This isn’t necessarily a “Theme Issue”, but looks like it may have to do with the code/file itself.

              I’d suggest using a different method if that doesn’t work, as I’m sure there are other solutions out there.

              If I come across anything that might work I’ll definitely let you know as soon as I see it.

              September 26, 2019 at 1:46 pm #23384
              SavvyPro
              Customer

                Appreciate it.

                BTW, it was working at one time and then all of a sudden it stopped, now that I recall.

              • Author
                Posts
              Viewing 6 posts - 1 through 6 (of 6 total)
              • You must be logged in to reply to this topic.