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">锚。 Demo。

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

Answer 2

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

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