使用 css 平滑滚动答案

【问题标题】：smooth scrolling using css使用 css 平滑滚动
【发布时间】：2014-10-05 18:23:17
【问题描述】：

我对编码很陌生，我有一个单页网站（html 和 css），其中包含页面各个部分的锚点。这些链接在导航中，而不是跳下页面，我想知道是否可以让页面平滑滚动 - 而不必使用 javascript。

我发现的唯一类似的东西是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 );}

我似乎无法让它工作。如果有人有任何提示，那将是惊人的。

【问题讨论】：

你能发布你的代码不起作用吗？
您发布的代码是小提琴中的代码。该代码特定于该应用程序。您将无法为您的项目使用相同的代码。你明白吗？

标签： html css scroll smooth

【解决方案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;
    });

});

【讨论】：