요소 내에서 부드러운 스크롤, 첫 번째 링크/앵커 만 작동

오버플로 된 요소 내에서 부드러운 스크롤링이 작동하는 데 문제가 있습니다. 첫 번째 링크/앵커는 예상대로 작동하지만 후속 링크는 앵커로 스크롤하지 않습니다.요소 내에서 부드러운 스크롤, 첫 번째 링크/앵커 만 작동

<!doctype html> 
<html> 
<head> 

<style> 
#container {width: 400px; height: 400px; background: #ccc; overflow-y: scroll} 
div > div {margin-top: 500px; height: 1px; background: red;} 
</style> 
</head> 

<body> 
<div id="container"> 
    <a href="#anchor-a">NEXT</a> 
    <div id="anchor-a"></div> 
    <a href="#anchor-b">NEXT</a> 
    <div id="anchor-b"></div> 
    <a href="#anchor-c">NEXT</a> 
    <div id="anchor-c"></div> 
</div> 

<script> 
$(function() { 
    $('a').click(function() { 
    if (location.pathname.replace(/^\//,'') == this.pathname.replace(/^\//,'') && location.hostname == this.hostname) { 
     var target = $(this.hash); 
     target = target.length ? target : $('[name=' + this.hash.slice(1) +']'); 
     if (target.length) { 
     $('#container').animate({ 
      scrollTop: target.offset().top 
     }, 1000); 
     return false; 
     } 
    } 
    }); 
}); 
</script> 

</body> 
</html>

어떤 도움을 주시면 감사보다 더 많은 것이다. 고맙습니다.

출처

2014-04-26 user1521516

고정 스크립트 :

<script> 
$(function() { 
    $('a').click(function() { 
    if (location.pathname.replace(/^\//,'') == this.pathname.replace(/^\//,'') && location.hostname == this.hostname) { 
     var target = $(this.hash); 
     target = target.length ? target : $('[name=' + this.hash.slice(1) +']'); 
     if (target.length) { 
     $('#container').animate({ 
      scrollTop: $('#container').scrollTop() + target.offset().top 
     }, 1000); 
     return false; 
     } 
    } 
    }); 
}); 
</script>

출처

2014-04-26 00:34:25 aimadnet

감사합니다! 도움에 감사드립니다! – user1521516

요소 내에서 부드러운 스크롤, 첫 번째 링크/앵커 만 작동

답변

관련 문제