2011-08-30 3 views
0

jQuery와 관련된 질문이 있습니다. 단추를 클릭 할 때 jQuery를 사용하여 토글 된 주석 상자가 있습니다.Jquery 슬라이드 페이지 하단에

내가 겪고있는 문제는 버튼이 페이지 맨 위에 있고 양식이 맨 아래에 있다는 것입니다. 누군가가 버튼을 클릭하면 댓글 상자가 전환되었음을 알 수 없습니다. 양식을 볼 수 있도록 페이지가 바닥으로 끌리는 댓글 제출 버튼을 클릭하면 어떤 방식으로 표시됩니까?

답변

1

당신이 리디렉션 (예 을 yourformid.) 폼에 ID를 추가 할 수 있습니다 같은 : 에 http : // yoururl #이을 yourformid.

$('#buttonID').click(function(){ 
    $('html, body').animate({ 
    scrollTop: $('#elementID').offset().top 
    }); 
}); 

그냥 ID로 #elementID 교체 :

<a href="#formone" onclick="showform()">Form</a> 
<form id="formone">....</form> 
0

단순히 같은 앵커를 사용하는 형태로 아래로 이동합니다 스크롤하려는 하단에있는 요소의

준비 처리기에 코드를 포장해야합니다 :

$(function(){ 
    $('#buttonID').click(function(){ 
     $('html, body').animate({ 
     scrollTop: $('#elementID').offset().top 
     }); 
    }); 
}); 
1
당신은 다음과 같이 애니메이션 패션 거기에 스크롤 할 수 있습니다

:이 페이지에서

+0

당신은 내 하루 멋쟁이를 만들어 줘서 고마워. 당신은 jQuery 괴짜가 아님을 실제로 설명합니다. – Shanon

+0

@Shanon : jQuery의'animate' 함수는 매우 유연하여 사용자 정의 애니메이션을 만들 수 있습니다. 여기서 스크롤 할 요소의'top' 위치를 지정합니다. 'animate' 함수는 애니메이션 방식으로 스크롤 할 수있게 도와줍니다. – Sarfraz

+0

감사합니다 sarfraz! – Shanon

1

간단한 해결책은 button 양식 HTML에 제출 특히 때문에 당신의 button 요소에 a 요소를 변경하고, a 요소로 사용될 수있다 문서 내 탐색. 당신이 a 요소가있을 때

그래서, 같은 귀하의 코멘트 상자 상 ID 속성을 배치 : 다음 이전 a 요소에 HREF 속성을 넣어

<div id="commentBox"></div> 

, 값은 #commentBox해야 요소는 다음과 같이 표시 될 수 있습니다.

<a href="#commentBox" onclick="$('#commentBox').show();">Text</a> 

이 솔루션은 브라우저의 기능을 사용하여 o 주석 상자이므로 스크롤하는 데 애니메이션을 구현할 수는 없지만 가장 표준적인 방법 일 수 있습니다.

1

당신은 앵커를 사용하고 매우 Sarfaz의 대답처럼, 스크롤 애니메이션을 적용 할 수 있습니다 : 좋아

function goToByScroll(id){ 
     $('html,body').animate({scrollTop: $("#"+id).offset().top},'slow'); 
} 

그런 다음 당신이 그것을 호출 할 수 있습니다

<script> 
    goToByScroll("theIdIWantToGoTo"); 
</script> 

데모 : http://djpate.com/portfolio/scrollTop/

출처 : http://djpate.com/2009/10/07/animated-scroll-to-anchorid-function-with-jquery/