Here’s something I run into time and again.  The website looks great on different devices, you did a great job on that responsive layout.  But something silly happens and if you’re using a theme for your Drupal or WordPress site, they usually didn’t write code to accommodate this flaw in UI behavior.

When someone views your site on a smart phone like an Android or iPhone, when your nav bar and website header (logo and perhaps search box) takes up most of the top of the page.  So, when a user selects a new page, the new page loads, but the content is not seen at first — just all that top stuff at the top of your page.  Now, you can responsively perhaps save this precious display real estate by reworking in perhaps collapsible menus or be creative else where, or you can just make sure at a certain screen size you scroll the website to the top of the content you know the user is looking for.

This is a basic UI (user interface) principle — show the user what they are looking for with the least amount of user effort.  So, below is a simple behavior modification for your website in JQuery.  Just add this code in your footer, make sure you have the JQuery library loaded, rename the menu “li a” to your menu links, rename the “scrollTop” element from “.post-content:first” to the class where your posts start displaying content.  You may have to make other modifications to make it work in your CMS, but this should work with fairly few changes in WordPress, Drupal, Magento and/or Joomla:

// For responsive after button click to scroll to actual content instead of showing button menus up top
jQuery(window).load(function(){
var scrn_w=jQuery(window).width();

if (scrn_w<=800){

jQuery(‘html, body’).scrollTop(jQuery(“.post-content:first”).offset().top-25);

// Fix mobile devices not able to click main button
jQuery(‘li a’).click(function(){

jQuery(this).toggleClass(“menu_selected”);

jQuery(“.menu_selected”).unbind();

jQuery(‘.menu_selected’).click(function(){

go_url=jQuery(this).attr(“href”);
window.location=go_url;
});

});

}

});