CSS를 사용하여 부드러운 스크롤

Question

저는 코딩이 새로워졌습니다. 페이지를 통해 다양한 섹션에 앵커 포인트가있는 단일 페이지 사이트 (HTML 및 CSS)가 있습니다. 이것들은 nav에 링크되어 있고 페이지를 뛰어 넘지 않고 자바 스크립트를 사용하지 않고 페이지를 부드럽게 스크롤 할 수 있는지 궁금합니다.

내가 같이 발견하는 유일한 것은

a[ id= "servicios" ]:target ~ #main article.panel { 
-webkit-transform: translateY(0px); 
transform: translateY(0px);} 

a[ id= "galeria" ]:target ~ #main article.panel { 
-webkit-transform: translateY(-500px); 
transform: translateY(-500px);} 

a[ id= "contacto" ]:target ~ #main article.panel { 
-webkit-transform: translateY(-1000px); 
transform: translateY(-1000px);} 

*/

스크롤 http://jsfiddle.net/YYPKM/3/

/* * 내가 그것을 얻이 수없는 것. 누군가가 어떤 조언을했다면 그것은 놀라 울 것입니다.

번이 데모를 보면 쉽게 할 수

Answer 1

...

SMOOTH SCROLLING DEMO이 참조 용입니다

,이 같은 JQuery와 코드를보십시오 ..

$(function() { 

    $('html, body').css('overflow', 'hidden'); 

    function updateSize() { 
     var winWidth = $(window).width(), 
      winHeight = $(window).height(), 
      wrapSum = $('.box').siblings().length; 
     $('#wrap').css({ 
      width:winWidth*(wrapSum/2), 
      height:winHeight*(wrapSum/3) 
     }); 
     $('.box').css({ 
      width:winWidth, 
      height:winHeight 
     }); 
    } updateSize(); 

    $(window).resize(function() { 
     updateSize(); 
    }); 

    $('ul#nav a').click(function() { 
     $('a.active').removeClass('active'); 
     $(this).addClass('active'); 

     $('html, body').scrollTo($(this).attr('href'), 1000);  
     return false; 
    }); 

});