Question

i have problem with my code.

I use this JS

$(document).ready(function() {
//Default Action
  $(".tab_content").hide(); //Hide all content
  $("ul.tabs li:first").addClass("active").show(); //Activate first tab
  $(".tab_content:first").show(); //Show first tab contentDocument

//On Hover Event
  $("ul.tabs li").hover(function() {
     $("ul.tabs li").removeClass("active"); //Remove any "active" class
     $(this).addClass("active"); //Add "active" class to selected tab
     $(".tab_content").hide(); //Hide all tab content
     var activeTab = $(this).find("a").attr("href"); //Find the rel attribute value to identify the active tab + content
     $(activeTab).fadeIn(); //Fade in the active content
     return true;
  });
});

When I hover over a tab, the content is changed, but the browser scrolls the page to the top.
I would like to have – When i hover over a tab, page remains in its current scroll position and content is updated.

Answer 1

The problem is happening because when you perform the hide() the page height is decreased forcing the browser the scroll to the top of the page (ie no scrolling is needed to show the whole page). Give your container div : <div class="tab_container"> a height.

Tested on your site using firebug and prevents the scrolling – set the height of the <div class="tab_container"> to 500px for example – this fixes the problem … is the content variable height ?

You could also use the min-height css property.