2013-10-10 2 views
2

앵커 링크로 페이지를 스크롤하고 싶습니다. 나는이 같은 URL이있는 경우jQuery 스크롤이 앵커와 함께 작동하지 않습니다.

$('a').click(function(){ 
     $('html, body').animate({ 
      scrollTop: $($(this).attr('href')).offset().top 
     }, 400); 
     return false; 
    }); 

그것은 잘 작동 : 나는 다음과 같은 코드를 사용하고 그러나

<a href="#comments">Comments</a> 

을, 문제는 마지막에 #을 추가하여 URL이 자동으로 생성된다는 것이다 현재 URL의 다음과 같습니다.

<a href="http://example/sth/#comments">Comments</a> 

위와 같은 이유로 인해 작동하지 않습니다. URL의 마크 업을 변경할 수 없습니다. 어떻게 jQuery를 수정하여 이러한 URL을 사용할 수 있습니까?

답변

3

당신은 대신의 앵커의 hash 속성을 읽을 수있는 것은 href입니다 :

$('a').click(function(){ 
    $('html, body').animate({ 
     scrollTop: $(this.hash).offset().top 
    }, 400); 
    return false; 
}); 

http://jsfiddle.net/KL5uw/

+0

멋진 접근 방식을 사용하면 앵커 URL로 할 수 있는지, +1 : –

+0

정말 고마워, 큰 도움이되었다 :) – user2738640

0

스크롤 특히 앵커 태그에, 이것은 HTML 만

예와 함께 할 수 있습니다 :

<a name="top"></a> // where we have to reach 
<a href="#top">last</a>  // we reach their by clicking on this we can also use an image, align in right 

Demo

관련 문제