2016-11-07 1 views
0

jQuery 애니메이션을 scrollTop과 함께 사용하여 앵커 링크에 부드러운 스크롤 효과를 만들어야합니다. 내 현재 프로젝트에서이 작동하지 않습니다. 모든 애니메이션 - scrollTop 이벤트는 아무 것도하지 않습니다. 헤더에 jQuery 3.1.1을로드합니다.jQuery scrollTop 이벤트가 움직이지 않습니다

$('a[href*=#]').on('click', function(event){  
    console.log("ScrollTop"); 
    $("html, body").animate({ scrollTop: 500 }, "slow"); 
    return false; 
}); 

내가 내 콘솔에서 ScrollTop을 볼 수 있지만 애니메이션이없는 : 내 바닥 글 main.js에서 나는 다음과 같은 자바 스크립트를 사용합니다. 나는 무엇을해야할지 잘 모른다. 나는 많은 것을 시도했다. 나는 또한 모든 다른 브라우저에서 작동하는지 테스트했습니다.

답변

0

이 당신을 위해 작동합니다 :

$('a[href^="#"]').on('click',function (e) { 
     var href = $(this).attr('href'); 
     e.preventDefault(); 
     var target = this.hash, 
     $target = $(target); 
     $('html, body').stop().animate({ 
      'scrollTop': $target.offset().top - 180 
     }, 900, 'swing', function() { 
      window.location.hash = target;   
     }); 
    }); 
+0

들으. 그것은 스크롤이지만 오프셋과 애니메이션이 없습니다. 문제가 무엇인지 알 수 있습니까? 콘솔에 오류가 없습니다. – Peesen87

+0

코드로 귀찮은 것을 설정하면 문제가 무엇인지 알 수 있습니다. –

1

문제는 href와 선택이 #는 따옴표없이 다른 의미를 부여 포함되어 있다는 것입니다. 일단 당신이 따옴표로 # 넣어, 잘 작동합니다.

$('a[href*="#"]').on('click', function(){ 
    $('html,body').animate({scrollTop: 500}, "slow");  
}); 

예 : https://jsfiddle.net/3vy7adh7/

또는

당신이 유효한 a 태그에 게시물을 피하려면

,

$('a').on('click', function(e) 
{  
    e.preventDefault(); 
    if($(this).attr('href').indexOf('#') > -1) 
     $('html,body').animate({scrollTop: 500},"slow");  
}); 

예 : 당신의 도움에 대한 https://jsfiddle.net/3vy7adh7/1/