CSS3过渡与锚点

Question

我不能让这个锚转换工作!请告诉我你的想法.

这是CSS

a.transition {
    -webkit-transition: all 1s ease-in-out;
    -moz-transition: all 1s ease-in-out;
    -o-transition: all 1s ease-in-out;
    transition: all 1s ease-in-out;
}

这是HTML

<h1 id="intro">Let's Build Something... </h1>
<h1 id="intro2"><a class="transition" href="#create">Together</a>.</h1>
<br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/>

<p><a name="create" class="transition">My name is Geoff Phillips, and I'm an innovator. What can I create for you?<a/></p>

Answer 1

我认为你不能用CSS做到这一点.这是使用jQuery实现它的功能:

$('a[href^=#]').on("click",function(e){
    var t= $(this.hash);
    var t=t.length&&t||$('[name='+this.hash.slice(1)+']');
    if(t.length){
        var tOffset=t.offset().top;
        $('html,body').animate({scrollTop:tOffset-20},'slow');
        e.preventDefault();
    }
});?

这适用于任何<a href="#any-id-or-name">锚点. 演示.

要使其滚动更快或更慢,请'slow'以'fast'毫秒为单位更改为或任何数值.