使用CSS平滑滾動

我很新的編碼，我有一個單頁面網站（HTML和CSS）與各個部分通過頁面的錨點。這些鏈接在導航，而不是跳下頁面，我想知道是否可以讓頁面順利滾動 - 無需使用JavaScript。使用CSS平滑滾動

我找到喜歡它的唯一的事情是http://jsfiddle.net/YYPKM/3/

/* * 滾動 */

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);}

，我似乎無法得到它的工作。如果有人有任何提示，這將是驚人的。

來源

2014-04-11 user3522066

您可以發佈你的代碼不工作？ –

您發佈的代碼是小提琴中的代碼。該代碼是特定於該應用程序。您將無法爲您的項目使用相同的代碼。你明白嗎？ – lennon626

你可以很容易通過一次看這個演示...

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; 
    }); 

});

來源

2014-04-11 04:28:27 KesaVan

使用CSS平滑滾動

回答

相關問題