고정 요소의 내용을 변경할 때 원하지 않는 페이지 스크롤

Question

CSS의 고정 된 위치를 통해 화면 하단에 부착 된 메뉴 종류를 만들었으므로 제대로 작동합니다. 문제는 페이지가 다소 아래로 스크롤 된 다음 메뉴가 활성화 된 경우 (jQuery로 애니메이션 위로 슬라이드) 페이지가 다시 맨 위로 이동한다는 것입니다. 꽤 짜증나. 여기에 몇 가지 관련 코드입니다 :

//handle click on stats tab 
$('a.stats').click(function(e) { 
    if ($('#menuWrapper').hasClass("stats")) { 
     $('#menuWrapper').removeClass("stats") 
     .removeClass("open") 
     .animate({ bottom: '-100px'}, 300); 
    } else if (!$('#menuWrapper').hasClass("open")) { 
     $('#sponsors').hide(); 
     $('#feedback').hide(); 
     $('#stats').show(); 
     $('#menuWrapper').animate({ bottom: '0px'}, 300) 
     .addClass("stats") 
     .addClass("open"); 
    } else { 
     $('#menuWrapper').addClass("stats"); 
     $('#sponsors').fadeOut(); 
     $('#feedback').fadeOut(); 
     $('#stats').fadeIn(); 
    } 
    $('#menuWrapper').removeClass("sponsors") 
    .removeClass("feedback"); 
}); 

(. 이것이 내가 내용을 변경하는 방법의 예입니다 나는 현재의 상태에 따라 내용을 변경하거나 메뉴를 최소화 유사한 기능을 가지고있다.)

<div id="menuWrapper"> 

    <div id="menuTop"> 
     <a href="#" class="sponsors">Sponsors</a> | <a href="#" class="feedback">Feedback</a> | <a href="#" class="stats">Stats</a> 
    </div> 

    <div id="menuContent"> 
     <div id="sponsors"></div> 
     <div id="feedback"></div> 
     <div id="stats"></div> 
    </div> 

</div> 

(내용은 스폰서, 피드백 및 통계 div에 동적으로로드되기 전에 HTML 형식으로 표시됩니다.)

필요한 경우 펑키 한 기능의 예를 보려면 http://www.crowdsplat.com/alpha을 참조하십시오. 이 문제를 일으킨 원인에 대한 통찰력이 있거나 문제를 해결할 수있는 방법이 있다면 크게 감사하겠습니다. 시간 내 줘서 고마워.

Answer 1

당신은 예를 들어 = "#"

href가 예를 들어 북마크 잘못이 있다면 내가 가기 점프를 일으키는 가정 링크를 따라하려고 브라우저를 피하기 위해 클릭 함수에서 false를 반환 또는 event.preventDefault()을 사용하십시오

$('a.stats').click(function(e) { 
    e.preventDefault(); 
    if ($('#menuWrapper').hasClass("stats")) { 
     $('#menuWrapper').removeClass("stats") 
     .removeClass("open") 
     .animate({ bottom: '-100px'}, 300); 
    } else if (!$('#menuWrapper').hasClass("open")) { 
     $('#sponsors').hide(); 
     $('#feedback').hide(); 
     $('#stats').show(); 
     $('#menuWrapper').animate({ bottom: '0px'}, 300) 
     .addClass("stats") 
     .addClass("open"); 
    } else { 
     $('#menuWrapper').addClass("stats"); 
     $('#sponsors').fadeOut(); 
     $('#feedback').fadeOut(); 
     $('#stats').fadeIn(); 
    } 
    $('#menuWrapper').removeClass("sponsors") 
    .removeClass("feedback"); 
});