Modern Portfolio Pro – Scrolling

[pagerank]

I am using Modern Portfolio Pro. I have added the smooth scrolling capability to a page by adding the following

<script type='text/javascript' src='/wp-content/themes/modern-portfolio-pro/js/jquery.scrollTo.min.js?ver=1f5377270e80de4af718712f3afaf586-beta'></script>
<script type='text/javascript' src='/wp-content/themes/modern-portfolio-pro/js/jquery.localScroll.min.js?ver=1f5377270e80de4af718712f3afaf586b'></script>
<script type='text/javascript' src='/wp-content/themes/modern-portfolio-pro/js/scroll.js?ver=1f5377270e80de4af718712f3afaf586'></script>
<script type='text/javascript' src='/wp-includes/js/wp-embed.min.js?ver=1f5377270e80de4af718712f3afaf586'></script>

It works fine when viewed on a desktop screen. However, when viewing the page on a tablet, it scrolls down to the section ID, and then it bounces back up part way. Is there a way to fix this? Or, is it possible to enqueue these scripts only when the desktop screen is being used?

Thanks,
Chris

[Christoph]

Hi Chris,

you can enqueue the scripts conditionally with wp_is_mobile()
https://codex.wordpress.org/Function_Reference/wp_is_mobile

If you need more control, you could use a plugin called Mobble.

---

https://www.christophherr.com | Genesis Customizations | Buy me a coffee

[pagerank]

Hi Christoph,

Thanks for that! For my situation (only enqueue for desktop), would I need to use wp_dequeue_script to remove the scripts from mobile?

Chris

[Christoph]

Hi Chris,

you are welcome.

No, you would only enqueue the scripts if it´s not mobile.
if (! wp_is_mobile) {
...
}

---

https://www.christophherr.com | Genesis Customizations | Buy me a coffee

[pagerank]

Palm to forehead ... Thanks 🙂

[pagerank]

My palm is still beating my forehead ...

Could you please have a look at the following code and let me know where I'm going wrong?

if ( !wp_is_mobile() && is_page(507) ) {
function wpdocs_theme_name_scripts() {
   wp_enqueue_script( 'custom-script', '/wp-content/themes/modern-portfolio-pro/js/jquery.scrollTo.min.js?ver=1f5377270e80de4af718712f3afaf586-beta', array( 'jquery' ) );
   wp_enqueue_script( 'custom-script', '/wp-content/themes/modern-portfolio-pro/js/jquery.localScroll.min.js?ver=1f5377270e80de4af718712f3afaf586b', array( 'jquery' ) );
   wp_enqueue_script( 'custom-script', '/wp-content/themes/modern-portfolio-pro/js/scroll.js?ver=1f5377270e80de4af718712f3afaf586', array( 'jquery' ) );
   wp_enqueue_script( 'custom-script', '/wp-includes/js/wp-embed.min.js?ver=1f5377270e80de4af718712f3afaf586', array( 'jquery' ) );
}
add_action( 'wp_enqueue_scripts', 'wpdocs_theme_name_scripts' );

I have tried removing
, array('jquery')
'custom-script',

Neither worked. As you can see, I'm not a coder, just a tinkerer. Any help would be greatly appreciated.
Chris

[Christoph]

Hi,

I haven't tested the code but this looks better:

function wpdocs_theme_name_scripts() {
	if ( !wp_is_mobile() && is_page(507) ) {
   		wp_enqueue_script( 'custom-script', '/wp-content/themes/modern-portfolio-pro/js/jquery.scrollTo.min.js?ver=1f5377270e80de4af718712f3afaf586-beta', array( 'jquery' ) );
   		wp_enqueue_script( 'custom-script', '/wp-content/themes/modern-portfolio-pro/js/jquery.localScroll.min.js?ver=1f5377270e80de4af718712f3afaf586b', array( 'jquery' ) );
   		wp_enqueue_script( 'custom-script', '/wp-content/themes/modern-portfolio-pro/js/scroll.js?ver=1f5377270e80de4af718712f3afaf586', array( 'jquery' ) );
   		wp_enqueue_script( 'custom-script', '/wp-includes/js/wp-embed.min.js?ver=1f5377270e80de4af718712f3afaf586', array( 'jquery' ) );
	}
}
add_action( 'wp_enqueue_scripts', 'wpdocs_theme_name_scripts' );

---

https://www.christophherr.com | Genesis Customizations | Buy me a coffee

[pagerank]

Thanks again for your help! I eventually figured out how to do it a) using Genesis Extender and b) installing the plugin "Mobble" provided at the bottom of the WordPress.org link you sent me. Here's the direct link if anyone else needs it - https://github.com/scottsweb/mobble

Thanks again!

[Author]

Posts