CSS3过渡与锚点

时间:2012-09-28 16:05:58

标签: html css3 anchor transition

我无法让这个锚转换工作!请告诉我你的想法。

这是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>

2 个答案:

答案 0 :(得分:8)

我认为你不能用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">锚点。 的 Demo

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

答案 1 :(得分:0)

您可以使用scrollIntoView JavaScript方法滚动到页面的任何元素。它适用于任何元素。 document.getElementById("yourElement").scrollIntoView();将滚动到yourElement。使用Firefox,您甚至可以通过添加{behavior:'smooth'}作为方法的参数来平滑滚动。不幸的是,这不是跨浏览器。

如果你想要一个跨浏览器的VanillaJS lib,我会推荐Smooth-scroll