url: happycowstudios.com

under the process section, you’ll find some tabbed content. each time you select one of the tabs, the page scrolls a little, until eventually, the whole section is off the page. not sure what is causing it. please advise.

thanks so much!

cheers!
shaun

I noticed that you have some custom script on your site for scrolling behavior,

there are some script I see on your site that is affecting the tab_navs like this one

$('html,body').animate({ scrollTop: $('#' + hash ).offset().top - $('.x-navbar').height()},700 ,'swing');

or most likely the script from here,
view-source:https://happycowstudios.com/
from line 423 to line 476

Can please you advise where did you got those script so we can get an idea on whats happening.

Cheers

both scripts were from this thread (one pn page one, the other on page two): http://theme.co/x/member/forums/topic/nav-bar-not-fully-working-on-1-page-scrolling/

here is a copy of what we have in the custom javascript:

jQuery(function($){

var window_base = window.location.href.split(“#”).slice(0)[0];
var window_hash = window.location.href.split(“#”).slice(-1)[0];
var outbound = /^https?:///i;

$(‘.x-nav a’).each(function(){ //Scan links and convert them to relative hash for one page navigation’s Active statuses to work properly when manually scrolling

var hash = $(this).attr(‘href’).split(“#”).slice(-1)[0];
var anchor_base = $(this).attr(‘href’).split(“#”).slice(0)[0];

if(hash) { //Does it have hash? then perform check
if(anchor_base == window_base) { //If same page, then no need to reload, just make it relative
$(this).attr(‘href’, ‘#’+hash);
} // Else, leave it that way. So when user clicked, it will just link them to outbound page
}

}).click(function(e){ //Enable Parent and Submenu scrolling

var hash = $(this).attr(‘href’).split(“#”).slice(-1)[0];

if(hash && !outbound.test( $(this).attr(‘href’) ) ) { //Does it have relative hash?

e.preventDefault(); //Disable jumping

$(‘html,body’).animate({ scrollTop: $(‘#’ + hash ).offset().top – $(‘.x-navbar’).height()},700 ,’swing’);

//Now add active status for automatic scrolling
$(‘.x-nav li’).removeClass(‘current-menu-item’);
$(this).parent().addClass(‘current-menu-item’);

}

});

$(document).ready(function(){ // Enable auto scroll when loaded.

$(‘.x-nav li’).removeClass(‘current-menu-item’);
//$(‘a:not([href*=”#”])’).parent().addClass(‘current-menu-item’); For experiment only

if(window_hash) {
$(‘a[href$=”#’+window_hash+'”]’).click(); //Click it, so it will use default click from one page navigation event and submenu event
}
})

});

jQuery(function($){
$(‘.scroll-link’).click(function(e){
e.preventDefault();

$(‘html,body’).animate({
scrollTop: $(‘#’ + $(this).attr(‘href’).split(“#”).slice(-1)[0] ).offset().top – $(‘.x-navbar’).height()
},700 ,’swing’);
});
});

I don’t want users having to scroll back up once they clicked a tabbed element (LEFT or RIGHT TABS).

Thanks for posting in.

Add this code at your customizer’s custom javascript.

jQuery(function($){

$('.x-nav-tabs-item a').on('click', function(){

$('html,body').stop().animate({
      scrollTop: $( $(this).attr('href') ).offset().top - $('.x-navbar').height()
    },700 ,'swing');

});

});

Hope this helps.