스크롤하기 전에 매끄러운 스크롤이 왜 깜박입니까?

Question

저는 앵커 태그를 통해 섹션으로 분리 된 단일 페이지 웹 사이트를 구축하고 있습니다. 네비게이션 링크를 클릭하면 매끄럽게 섹션으로 스크롤되며 (자금 조달 영역과 우리 만), 링크를 클릭하면 약 50 %의 시간이 걸릴 것입니다. 배경 이미지가 부드럽게 스크롤되어 이전에 깜박입니다. jQuery는 위나 아래로 스크롤한다.

나에게 그것은 HTML이 앵커 즉, 깜박임으로 바로 가려고하는 것 같지만 jQuery가 말하길, 천천히 스크롤해야합니다.

이 문제를 해결하는 방법을 모르겠습니다.

jQuery를 :

// SlowScroll Funding Areas 
$(document).ready(function(){ 

// 'slowScrollTop' is the amount of pixels #teamslowScroll 
// is from the top of the document 

    var slowScrollFunding = $('#funding-areas').offset().top; 

// When #anchor-aboutus is clicked 

    $('#anchor-funding-areas').click(function(){ 
     // Scroll down to 'slowScrollTop' 
     $('html, body, #home-wrap').animate({scrollTop:slowScrollFunding}, 1000); 
    }); 
}); 

// SlowScroll About Us 
$(document).ready(function(){ 
// 'slowScrollTop' is the amount of pixels #slowScrollTop 
// is from the top of the document 

    var slowScrollTop = $('#about-us').offset().top + 446; 

// When #anchor-aboutus is clicked 

$('#anchor-aboutus').click(function(){ 
    // Scroll down to 'slowScrollTop' 
    $('html, body, #aboutus-wrap').animate({scrollTop:slowScrollTop}, 1000); 
}); 
}); 

나는 매우 감사 일체의 제안.

Answer 1

클릭 기능을 추가 한 후 event.preventDefault();을 추가하십시오.

이렇게하면 링크가 수행해야하는 작업 (앵커로 즉시 이동)을 중지하고 경쟁 조건을 방지합니다.

Answer 2

$('#anchor-aboutus').click(function(){ 
    // Scroll down to 'slowScrollTop' 
    $('html, body, #aboutus-wrap').animate({scrollTop:slowScrollTop}, 1000); 
    event.preventDefault(); 
    event.stopPropagation(); 
}); 

심지어 청소기 : 왜

$('#anchor-aboutus').click(function(){ 
    // Scroll down to 'slowScrollTop' 
    $('html, body, #aboutus-wrap').animate({scrollTop:slowScrollTop}, 1000); 
    return false; 
}); 

은 다음과 같습니다

• event.preventDefault() vs. return false