0

I have a small UX issue where on mobile our header takes up a majority of the screen space. This causes confusion when you use our page links/navigation because there is no refresh visible above the fold.

To solve this we would like to auto scroll down to our #primary div on all pages except the home page. And I only wana do this on mobile devices. (screens less then 768px wide)

So far I can only apply it to all pages and it works on both desktop and mobile. I only want it to work on mobile and i want the home page to be ignored.

Here is code snippet im working with

  $('html, body').animate({
        scrollTop: $("#primary").offset().top
    }, 2000);

1 Answer 1

1

Some thing like this work for you:

jQuery(document).ready(function($){
                        if ( $(window).width() < 768 || window.Touch) { 
                            $('html, body').animate({
            scrollTop: $("#primary").offset().top
        }, 2000);
                        } 
    });
4
  • This looks great as far as the mobile issue is concerned! How do i apply this to woocommerce product pages and categories only without editing woocommerce core files?
    – Patrick
    Mar 14, 2017 at 10:33
  • Or any page that is not the home page works too.
    – Patrick
    Mar 14, 2017 at 10:33
  • Thumbs up for now. Thnx!
    – Patrick
    Mar 14, 2017 at 10:34
  • then enque this script as your need. like this: function my_conditional_enqueue_script() { global $post; if (is_single($post->ID) && in_category('mouse', $post->ID)) { wp_enqueue_script('mousescript'); } } add_action('wp_enqueue_scripts', 'my_conditional_enqueue_script'); this link may help you. Mar 14, 2017 at 12:39

Your Answer

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

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