实现平滑滚动，而离开：目标CSS动画功能

我想实现平滑滚动，同时留下CSS：锚点链接的功能和目标动画。实现平滑滚动，而离开：目标CSS动画功能

我相信问题来自：被js操纵的目标状态，因此覆盖了css动画。为了提醒大家注意所选的＃部分的标题，我稍微改变填充上：目标，就像这样：

HTML

<section id="part_main"> 
    <div class="text_box"> 
     <h1>To <a href="#">Section</a></h1> 
    </div > 
</section> 

... 

<section id="#"> 
    <div class="text_box"> 
     <h2>Headline Animation through Target</h2> 
     <h3>body copy</h3> 
    </div> 
</section>

CSS

@-webkit-keyframes target { 
    from { padding-left: 0px; } 
    50% { padding-left: 20px; } 
    to { padding-left: 0px; } 
    } 

:target div h2 { 
    -webkit-animation-name:target; 
    -webkit-animation-duration:3s; 
    -webkit-animation-iteration-count:1; 
    -webkit-animation-direction:linear; 
}

它作为一个动画就像我想要的那样，除了锚链接当然会导致页面跳转而不是平滑的滚动动作。和添加时，问题就来了：

<script> 
     $('a[href*=#]:not([href=#])').click(function(e) { 
      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) { 
       $('html,body').animate({ 
       scrollTop: target.offset().top 
      }, 1000); 
      return false; 
     } 
    } 
});

，企图使该页面过渡平滑。我曾尝试使用其他jQuery插件来操作页面位置，但可惜无济于事（我没有js // jQuery体验）。任何帮助或提示将珍惜我，让我的访客眼睛更快乐。谢谢:)

来源

2016-01-19 Andrew

你可以试试这个SO岗位来解决问题：HTTP：//计算器.com/questions/22246796/smooth-scrolling-with-just-pure-css –

这篇文章也可能会有帮助：http://stackoverflow.com/questions/25020582/scrolling-to-an-anchor-using-transition- CSS3 –

哎呀，过了约30分钟过早。

这里的滚动解决方案，无需：目标状态操作和完整的URL变化，解决方案应该没有其他人遇到这个问题：

<script> 
var $root = $('html, body'); 
$('a').click(function() { 
    var href = $.attr(this, 'href'); 
    $root.animate({ 
     scrollTop: $(href).offset().top 
    }, 500, function() { 
     window.location.hash = href; 
    }); 
    return false; 
}); 
    </script>

来源

2016-01-19 19:45:11 Andrew

实现平滑滚动，而离开：目标CSS动画功能

回答

相关问题