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);

Some thing like this work for you:

                        if ( $(window).width() < 768 || window.Touch) { 
                            $('html, body').animate({
            scrollTop: $("#primary").offset().top
        }, 2000);
  • 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 '17 at 10:33
  • Or any page that is not the home page works too. – Patrick Mar 14 '17 at 10:33
  • Thumbs up for now. Thnx! – Patrick Mar 14 '17 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. – Muhammad Riyaz Mar 14 '17 at 12:39

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

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