CSS3 Transitions with Anchors

html css anchor transition

13,770

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.

13,770

Author by

Nash Bridges

Updated on June 28, 2022

Comments

Nash Bridges almost 2 years

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>

TheZ over 11 years

What transition..? You're not adding any css properties to transform over. Try adding a hover pseudo-class with color properties (as well as a copy of those transition properties).
Shmiddty over 11 years

I believe you are attempting to animate the window scrolling to the anchor when a link is clicked, correct? This is not possible with CSS.

Nash Bridges over 11 years

I tried implementing this (which is exactly what I needed) but it still won't work. It worked in your demo, so I'm not sure why it won't work on my site.
Giona over 11 years

Have you included jQuery in your head section? Add this code: <script type="text/javascript" src="http://code.jquery.com/jquery-latest.pack.js"></script>
Nash Bridges over 11 years

Yeah, that's there. Maybe something else is messing it up. www.geoffphillips.me/version2.0
Giona over 11 years

Which version @RoddyoftheFrozenPeas ? Maybe i can't use target as a variable name, check it now: jsfiddle.net/gionaf/2YfzC
Nash Bridges over 11 years

It does work in chrome in the demo, that's what I'm using. You just need to add some more "<br/>" so that it has room to scroll down.
Giona over 11 years

@NashBridges try with the new version...again ;) i see it's throwing an "unexpected token ILLEGAL" error
Giona over 11 years

@NashBridges CTRL + SHIFT + J then move to the Console tab (in Chrome). Let me check for typos
Nash Bridges over 11 years

That doesn't work either. I got the last set of code to work without throwing an error by just erasing and re-typing the last line (line 17). But it didn't make the code work.
Giona over 11 years

Ok, let's focus on something else. Try to download this js file code.jquery.com/jquery-1.8.2.min.js and upload it to your site, so that you can include it with <script type="text/javascript" src="/path-to-your-js-folder/jquery.js"></script>
Giona over 11 years

@NashBridges ...and still not working :( so, maybe it's because of your doctype. Try to add type="text/javascript" to the <script> tag, or to move it just before the closing </body> tag
Nash Bridges over 11 years

That did it!!! You're a genius! The closing body tag thing. That gives those elements time to load or something?
Giona over 11 years

@NashBridges well, i just guessed so i'm not that genius ;-) probably it's related to your doctype restrictions. Consider moving to html5's <!DOCTYPE HTML> in future!
Nash Bridges over 11 years

My next question was going to be, "Could this be a doctype issue?" I just switched to 5...