Question

我对编码很陌生，我有一个单页网站（html和css），在页面的各个部分都有锚点。这些链接在导航中，而不是跳下页面，我想知道是否有可能允许页面顺利滚动 - 无需使用JavaScript。

/ * *滚动 * /

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

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

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

});

使用CSS平滑滚动

1 个答案: