Docs

[Michael B]

Dear support, dear forum,

I have a problem with the scrolling behavior of my onepage navigation site on mobile devices. Let me try to describe the problem:

The mobile version of my site has a fixed navbar, which is transparent (so only the menu-icon is displayed at all times). The problem arising from this setup is that when you click on one of the items from the menu, the site (seemingly) does not scroll all the way to the desired section (because the transparent fixed navbar sitting at the top reveals a part of the section above). I have searched the forums and found many others having similar problems, so I picked up some lines of custom JS from other forum posts, like this one:

jQuery(function($){
  $('.x-nav a').click(function(e){
       
   if( $(window).width() < 980 ) {
   
      $('html,body').stop().animate({
      scrollTop: $('#' + $(this).attr('href').split("#").slice(-1)[0] ).offset().top
      },1000 ,'swing');

   }

}); });

so far, so good… But now here´s my actual question: The code above does the trick (e.g. make the site scroll down a little bit further to the top of the desired section) when you simulate mobile screen sizes with a narrow browser window on a desktop pc, but it does NOT work on actual mobile devices (tested it in Chrome browser on Samsung Galaxy S3 and S5). Do you have any idea why this piece of code does not work on mobile phones?

I also tried to apply a similar piece of code to some buttons on my site so the scroll position of their target link would be adjusted too:

jQuery(function($){
  $('a.x-btn.scroll_to').click(function(e){
    
    if( $(window).width() < 980 ) {
      
    e.preventDefault();
    
    $('html,body').animate({
      scrollTop: $('#' + $(this).attr('href').split("#").slice(-1)[0] ).offset().top 
    },1000 ,'swing');
    }
  });
});

And the effect here is the same as with the menu. Works fine when you simulate mobile view, but does not work on actual mobile devices. Why is that, and how could it be fixed??

I really hope I oulined the problem in an understandable way 🙂

Would be awesome if you could assist with this issue! I´ll post the login credentials to my site in a private reply. Thanks in advance!

[Michael B]

This reply has been marked as private.

[Lely]

Hello Michael,

Would you mind updating above code to the following:

jQuery(function($){
  $('.x-nav a').on('click touchend', function() {
       
   if( $(window).width() < 980 ) {
   
      $('html,body').stop().animate({
      scrollTop: $('#' + $(this).attr('href').split("#").slice(-1)[0] ).offset().top
      },1000 ,'swing');

   }

}); });

jQuery(function($){
  $('a.x-btn.scroll_to').on('click touchend', function(e) {
    
    if( $(window).width() < 980 ) {
      
    e.preventDefault();
    
    $('html,body').animate({
      scrollTop: $('#' + $(this).attr('href').split("#").slice(-1)[0] ).offset().top 
    },1000 ,'swing');
    }
  });
});

Do let us know how this goes.

[Michael B]

Thank you so much! That works perfectly!

Themeco support team – you are awesome 🙂

[Prasant Rai]

Your satisfaction is a great compliment for us. Feel free to ask us again. Have a great day! 🙂

[Author]

Posts