저는 우리 사이트의 새 페이지를 작업 중이며 해결책을 찾을 수없는 작은 문제에 부딪 혔습니다. 우리 사이트의 상단 섹션에 클릭하면 페이지가 시작하기 위해 페이지 하단으로 스크롤하여 링크로 이동할 수있는 링크가 있습니다. 문제는 클릭하면 페이지가 애니메이션없이 바로 아래로 점프한다는 것입니다. http://jsfiddle.net/YtJcL/ 여기에서 코드를 찾았으며 바이올린에서 완벽하게 작동합니다. 아래는 내 사이트의 코드입니다. 모든 도움을 주시면 감사하겠습니다! 실제 페이지 링크는 다음과 같습니다 : http://www.scrubsandbeyond.com/koibysanita.aspx
머리:
<script type="text/javascript" src="/scripts/jquery-1.9.1.min.js"></script>
HTML :
<a class="scroll" href="#destination1">apply now</a>
<section id="destination1">Let's get started!</section>
jQuery :
$(".scroll").click(function(event){
event.preventDefault();
//calculate destination place
var dest=0;
if($(this.hash).offset().top > $(document).height()-$(window).height()){
dest=$(document).height()-$(window).height();
}else{
dest=$(this.hash).offset().top;
}
//go to destination
$('html,body').animate({scrollTop:dest}, 1000,'swing');
});
편집 : 페이지 링크 추가
다음은 사이트에서 업데이트 된 코드입니다. 이 시도-
<script>
$(function(){
function smoothScroll (duration) {
$('a[href^="#"]').on('click', function(event) {
var target = $( $(this).attr('href') );
if( target.length ) {
event.preventDefault();
$('html, body').animate({
scrollTop: target.offset().top
}, duration);
}
});
}
smoothScroll(400);
});
</script>
이 기사는 인터넷에서 수집됩니다. 재 인쇄 할 때 출처를 알려주십시오.
침해가 발생한 경우 연락 주시기 바랍니다[email protected] 삭제
몇 마디 만하겠습니다