부트 스트랩 3 - Chrome의 갑작스런 스크롤

Question

그리고 CSS를 상당량 편집했습니다. 크롬에서 테스트 할 때 좌상단 링크를 클릭하여 아래로 스크롤하면 스크롤 나는이 이상한 흔들 흔들 효과를 얻을.

코딩에 문제가 있다고 생각하여 다운로드 디렉토리의 원본 템플릿과 템플릿의 웹 사이트 실시간 미리보기로 돌아가서 여전히 동일한 오류를 표시합니다. 오류를 볼 수, 왼쪽 상단 링크를 bootstrap freelance tempalte

을 클릭하고 아래로 스크롤하려고 -

당신은 (나를 jsfiddle 링크를 게시보다 더 빨리입니다) 여기에 실시간 미리보기에서 볼 수 있습니다. Firefox에서는 웹 사이트가 움직이지 않거나 흔들리지 않으며, 마우스 휠을 아래로 스크롤하면 "고정"상태로 유지됩니다. 두 번째로 다시 스크롤하면 문제가 사라집니다.

어떻게 제거 할 수 있습니까? 원인을 파악할 수있는 방법이 있습니까? 어떤 도움을 주셔서 감사합니다.

Answer 1

문제는 아래 스크립트 (아래 코드 사용)입니다.

해당 링크를 클릭하면 이미 페이지 상단에 있더라도 .animate() 기능이 1.5 초 동안 자동으로 실행되어 페이지 상단으로 자동 스크롤됩니다. 그래서 링크를 클릭하면 자바 스크립트가 스크롤되는 동안 아래로 스크롤하여 그 불규칙한 효과를냅니다.

이 코드를 제거하면 문제가 해결되지만 좋은 여유 페이지 스크롤 기능이 느슨해집니다.

페이지 위쪽에 충돌하자마자 .animate() 기능을 중지 할 수있는 방법이 있지만 확신 할 수있는 최선의 방법은 없을 것입니다. 누군가 다른 사람이 도움을 줄 수 있습니다. 그 부분.

이것은 고전적인 "그 기능이 아니라 버그"시나리오 중 하나입니다.

<script src="js/freelancer.js"></script>

// jQuery for page scrolling feature - requires jQuery Easing plugin 
$(function() { 
    $('.page-scroll a').bind('click', function(event) { 
     var $anchor = $(this); 
     $('html, body').stop().animate({ 
      scrollTop: $($anchor.attr('href')).offset().top 
     }, 1500, 'easeInOutExpo'); 
     event.preventDefault(); 
    }); 
});