css keyframe animation on clicking an anchor ('#') link

Question

I have a link <a href="#test">link to test</a> and when clicking on it, the page will instantly jump to the 'test'-content. How can I add a transition when switching between this in-page links? Thank you very much :D

EDIT: It would be nice if I could use a css keyframe instead of the jquery animation. Anyone a solution?

Possible duplicate of [Smooth scrolling when clicking an anchor link](http://stackoverflow.com/questions/7717527/smooth-scrolling-when-clicking-an-anchor-link) — L L, Feb 04 '17 at 21:38

score 3 · Accepted Answer · answered Feb 04 '17 at 21:41

The fastest way would be load in jQuery and insert this snippet.

Step 1: Insert jQuery script tag before the closing body tag (</body>)

    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>

Step 2: Insert this snippet below

    <script>

        // Bind all a href clicks to this function
        $(document).on('click', 'a', function(event){

            // Prevent default events
            event.preventDefault();

            // Animate the body (html page) to scroll to the referring element 
            $('html, body').animate({
                scrollTop: $( $.attr(this, 'href') ).offset().top
            }, 1000);

        });

    </script>

You can edit where it says 1000 to change the speed and you can also add or subtract scrollTop: $( $.attr(this, 'href') ).offset().top to get additional offset off your element.

Example: This will be 100 pixels above your element instead of exactly on top.

scrollTop: $( $.attr(this, 'href') ).offset().top - 100

Thank you it works fine, but do you know how I can use a css keyframe instead of the jquery animation? — Benny Alex, Feb 05 '17 at 16:56

score 2 · Answer 2 · answered Feb 04 '17 at 21:37

I'm assuming you mean to smoothly scroll to the target instead of jumping there abruptly. If so, here's a way using javascript and jQuery.

$(function() {
  $('a[href*="#"]:not([href="#"])').click(function() {
    if (location.pathname.replace(/^\//,'') == this.pathname.replace(/^\//,'') && location.hostname == this.hostname) {
      var target = $(this.hash);
      target = target.length ? target : $('[name=' + this.hash.slice(1) +']');
      if (target.length) {
        $('html, body').animate({
          scrollTop: target.offset().top
        }, 1000);
        return false;
      }
    }
  });
});

div {
  min-height: 200vh;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<a href="#test">test</a>
<div></div>
<div id="test">test</div>

Thank you. Do you know how I can use a css keyframe instead of the jquery animation? — Benny Alex, Feb 05 '17 at 16:55

score 1 · Answer 3 · edited May 23 '17 at 12:08

1

Here is a jquery example:

$(document).on('click', 'a', function(event){
    event.preventDefault();

    $('html, body').animate({
        scrollTop: $( $.attr(this, 'href') ).offset().top
    }, 500);
});

and a fiddle: http://jsfiddle.net/9SDLw/. Neither the code nor the fiddle are mine, it is an answer I found here Smooth scrolling when clicking an anchor link

edited May 23 '17 at 12:08

Community

1
1

answered Feb 04 '17 at 21:37

L L

1,440
11
17

Thank you. So links with '#' called anchor links? – Benny Alex Feb 04 '17 at 21:50
your offset().top hasnt any effect until I will add e.g '-100' , right? – Benny Alex Feb 04 '17 at 22:04
Hey, do you know how I can use a css keyframe instead of the jquery animation? – Benny Alex Feb 05 '17 at 16:55

score 1 · Answer 4 · answered Feb 05 '17 at 17:22

1

This is not possible using CSS animation keyframes, the scroll position is not a CSS property that can be affected. You can change the position of the page scroll using Javascript or a number of javascript libraries (eg: jQuery).

answered Feb 05 '17 at 17:22

Donnie D'Amato

3,832
1
15
40

ah I thought if adding the given css class with javascript it would be possible XD – Benny Alex Feb 05 '17 at 20:40

css keyframe animation on clicking an anchor ('#') link

4 Answers4