CSS3 Transitions with Anchors

Question

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>

Answer 1

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.

Answer 2

You can scroll to any element of a page with the scrollIntoView JavaScript method. It is available on any element. document.getElementById("yourElement").scrollIntoView(); will scroll to yourElement. With Firefox, you can even scroll smoothly by adding {behavior:'smooth'} as a param of the method. This is not cross-browser unfortunately.

If you want a cross-browser VanillaJS lib, I would recommend Smooth-scroll