How to make a smooth jump link

nazanin_ashrafi

Nazanin Ashrafi

Posted on December 11, 2020

How to make a smooth jump link

I was working on my little project (you can check it out here BTW ) earlier and then I was like okay how about making a jump link!

So in this article I'm gonna be talking about two things :

  1. How to make a jump link
  2. And how to make it smooth ________________________________________

let's take a look at smooth jump link first :


and now let's see how to make a jump link (step by step) :

  • first make a link < a href=""> your text < /a>

  • add a link with # to href (for example href="#move-down" )
    < button>< a href="move-down">Down< /button>
    PS. by link I don't mean a real link, more like a name (like when you give classes a name)

  • now add an id (the same name as you gave it to href) to the element that you want the jump link to happen (in this case we want to jump to the last paragraph)



To put it more simply, in order to make a jump link you have to link the < a> to your specific element.


And now for the smooth part :

It's pretty simple actually.
We can do so by just adding "scroll-behavior" property to html and It'll smoothen the jump :

html {
scroll-behavior: smooth;
}

And that's it!
You're all set now!


Fun fact: the whole jump link thing might sound so simple and easy but it took me a while to actually understand what's going on lol.
So if you are like me , don't worry just play around with it , copy paste codes line by line and then try to rewrite them on your own and you'll get this eventually!

💖 💪 🙅 🚩
nazanin_ashrafi
Nazanin Ashrafi

Posted on December 11, 2020

Join Our Newsletter. No Spam, Only the good stuff.

Sign up to receive the latest update from our blog.

Related

CSS Box Model
css CSS Box Model

June 1, 2021

How to make a smooth jump link
css How to make a smooth jump link

December 11, 2020

What are CSS variables?
css What are CSS variables?

December 5, 2020