CSS3过渡与锚点 [英] CSS3 Transitions with Anchors

问题描述

我无法得到这个锚转换工作！请告诉我你的想法。

以下是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>让我们构建一些...< / h1> 
< h1 id =intro2>< a class =transitionhref =＃create> Together< / a>。< / h1& 
< br />< br />< br />< br />< br />< br />< br / >< br />< br />< br />< br />< br />< br / < br />< br />< br />< br />< br />< br />< br / 
 
< p>< a name =createclass =transition>我的名字是Geoff Phillips，我是一个创新者。我可以为您建立什么？< a />< / p> 
  

解决方案

我不认为你可以CSS。这里有一个函数来实现它与jQuery：

  $（'a [href ^ =＃]'）。on ，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'数字值（以毫秒为单位）。

I can't get this anchor transition to work! Please tell me what you think.

Here's the 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;
}

And here's the 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>

解决方案

I don't think you can do it with just CSS. Here's a function to achieve it with 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();
    }
});​

This will work with any <a href="#any-id-or-name"> anchor. Demo.

To make it scroll faster or slower, change 'slow' to 'fast' or any numeric value in milliseconds.

这篇关于CSS3过渡与锚点的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！