jquery scrolling problem
I am using a jquery function to scroll the page top to bottom. when i click a menu in the left, it scrolls the page to that certain position. here is the function
function initScroll(){
var dur = 750;
//var hold = jQuery('#header');
var links = jQuery('#navigation > li > a');
//var h = hold.height();
var h =开发者_JAVA百科 0;
links.click(function(){
var link = jQuery(this);
var href = link.attr('href');
if(href=="#main_content")
var h = 0;
else
var h = 0;
//alert(href);
//alert(h);
var box = $($(this).attr('href')).offset().top - h;
if(!$.browser.opera) $('body').stop().animate({scrollTop: box }, {queue:false, duration:dur});
$('html').stop().animate({scrollTop: box }, {queue:false, duration:dur});
return false;
});
}
the menu is like
<ul id="navigation">
<li class="sup"> <a href="#main_content">Home</a> </li>
<li class="sup"> <a href="#section_about">About Us</a> </li>
<li class="sup"> <a href="#section_business">Our Business</a> </li>
<li class="sup"> <a href="#section_vision">Our Vision</a> </li>
<li class="sup"> <a href="#section_contact">Contact</a> </li>
</ul>
code
a fixed bar(div with position fixed at top)
<div id="breadcrum" class="breadcrum"></div>
and then the content divs(scrolls to here) are
<div id="section_home" class="content_section">contents...</div>
<div id="section_about" class="content_section">contents...</div>
<div id="section_business" class="content_section">contents...</div>
<div id="section_vision" class="content_section">contents...</div>
<div id="section_contact" class="content_section">contents...</div>
problem is that, when I am at top page(section_home) then if i click some other menu the position is not accurate. it is cutting some top of the certain content div. but then if i click some other menu(not home) from that certain page, it seems ok.
i have tested removing the top fixed bar and then it is ok. but not with that fixed bar. you can visit the link and will have a clear idea http://www.stonegardenbd.co.cc/mg/
thanks in advance.
I believe your problem is you are not taking care for the breadcrum div height. Thats why the text is falling behind it. You should try taking care of the breadcrum div from the home menu.
精彩评论