Jquery animation scroll with anchors
What Will I Learn?
- You will learn how to create anchors on your site.
- Create scroll animation to jump sections when you click a link on your site.
Requirements
- Basic knowledge about HTML.
- Basic knowledge about CSS.
- Basic knowledge about JavaScript.
- You have to install / host the jQuery file or you can add jQuery CDN if you don't want to install or host it.
- To try out the code in this tutorial you will need a code editor and browser.
Difficulty
- Basic
Tutorial Contents
With this tutorial you will learn how to do an animation with the scroll down with anchors. This is interesting when we have on the sites links between sections where we want the user to click on the link and jump to the desired section but with a slow scroll animation.
Let's start by creating an index.html file and inserting the base HTML code to make a small example to use the scroll animation between sections.
- Open your code editor
- Create a new file and save as
index.html
- Add html base code
< html>
< head>
< title>Scroll Animation< /title>
< /head>
< body>
< /body>
< /html>
Now let's start creating the anchors. This will be to identify where the link will be so we can jump to the section that we want the user to go to.
- The
class="link-scroll"
will be our link element to detect the click and start scrolling.href="#section-footer"
will be the identifier of our section that we will scroll. - The element
id="section-footer"
will be our section to which the scroll will be forwarded.
< a class="link-scroll" href="#section-footer">HEADER< /a>
< p id="section-footer">SECTION FOOTER< /p>
Let's put our anchors in our html code base.
< html>
< head>
< title>Scroll Animation< /title>
< /head>
< body>
< header>
< a class="link-scroll" href="#section-footer">HEADER< /a>
< /header>
< footer>
< p id="section-footer">SECTION FOOTER< /p>
< /footer>
< /body>
< /html>
To use jQuery, we need to install or host it. We can also add jQuery CDN. For more details you can visit an official jquery website. In this tutorial, I use Google's CDN. Add the CDN in the < head>
element.
< script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js">< /script>
Let's include in our sample code to see how the structure looks.
< html>
< head>
< script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js">< /script>
< title>Scroll Animation< /title>
< /head>
< body>
< header>
< a class="link-scroll" href="#section-footer">HEADER< /a>
< /header>
< footer>
< p id="section-footer">SECTION FOOTER< /p>
< /footer>
< /body>
< /html>
After we have our complete HTML structure we are going to put the code to make the slow scrolling animation effect jump to the section we want when we click on a link.
The script will be included at the end of our in order to detect the element that is in our html to make the animation effect.
I put a time of 1000 to be a little slow but if we want to put faster we can put the shortest time with a lower value.
< script>
$('.link-scroll').on("click", function(ev){
$('html, body').animate({
scrollTop: $( $(this).attr('href') ).offset().top
}, 1000);
});
< /script>
Now I'm going to show the structure of the html with the stylization so that you can see the example working in your pageindex.html
.
< html>
< head>
< script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js">< /script>
< style>
header {
top: 0px;
background-color:#000;
height: 50px;
color:#fff;
text-align:center;
}
. exampleDiv1, . exampleDiv2, . exampleDiv3{
background-color: #fff;
text-align:center;
padding: 250px 0px 250px 0px;
}
. exampleDiv2{
background-color: #000;
color:#fff;
}
footer {
height: 50px;
background-color:#000;
color:#fff;
text-align:center;
}
< /style>
< title>Scroll Animation< /title>
< /head>
< body>
< header>
< a class="link-scroll" href="#section-footer">HEADER< /a>
< /header>
< div class="exampleDiv1">DIV 1< /div>
< div class="exampleDiv2">DIV 2< /div>
< div class="exampleDiv3">DIV 3< /div>
< footer>
< p id="section-footer">SECTION FOOTER< /p>
< /footer>
< script>
$ ('.link-scroll').on("click", function(ev){
$ ('html, body').animate({
scrollTop: $ ( $(this).attr('href') ).offset().top}, 1000);
});
< /script>
< /body>
< /html>
Here you can see the code of this tutorial working. LIVE DEMO (click where it says header to see the scroll function)
Curriculum
- Tutorial:How to add breadcrumb in wordpress
- Tutorial: How to create a data table with filters and Import & Export data table (Wordpress)
- Tutorial: How to use Lazy Load in Wordpress
- Tutorial: How to use EU Cookie Law (Wordpress)
- Tutorial: How to use tawk.to in wordpress
- Tutorial: Wordpress: Album and Image Gallery Plus Lightbox
- Tutorial: Wordpress: WP Multilang
- Tutorial: How to use disabe comments plugin
- Tutorial: How to use duplicate pages plugin (Wordpress)
Posted on Utopian.io - Rewarding Open Source Contributors
Thank you for the contribution. It has been approved.
You can contact us on Discord.
[utopian-moderator]
Hey @creon, I just gave you a tip for your hard work on moderation. Upvote this comment to support the utopian moderators and increase your future rewards!
Thank you :)
Hey @portugalcoin I am @utopian-io. I have just upvoted you!
Achievements
Community-Driven Witness!
I am the first and only Steem Community-Driven Witness. Participate on Discord. Lets GROW TOGETHER!
Up-vote this comment to grow my power and help Open Source contributions like this one. Want to chat? Join me on Discord https://discord.gg/Pc8HG9x
Thank you very much, I will try my best to contribute to an open-source community.
Sempre bom ver outro portugues no steemit :)
Continua o bom trabalho!
Obrigado pelas tuas palavras.
Somos pouquinhos por cá ainda, temos que divulgar mais este mundo do Steemit aqui por Portugal!
Abraço
É dificil... o povo portugues é muito á antiga, e os jovens preferem estar a jogar no computador e a apanhar bebedeiras em vez de verem de isto.
Mas pronto olha, quando eles vierem para o steemit já nos os dois devemos ser baleias xD
Ahaha o pessoal mais velho acredito que não adira muito a isto, mas a nossa geração é toda virada para as tecnologias. Acho que ainda não chegou aos ouvidos de muita gente. Eu já tenho alguns amigos por cá, falei sobre a plataforma e expliquei bem o seu conceito. No dia seguinte já me estavam a mandar mensagens a dizer que estavam à espera da aprovação.ahahah
É uma questão de divulgar e explicar bem como isto funciona.
Abraço amigo!
O problema é explicar, de onde vem o dinheiro? Ainda têm a mentalidade do fiat e nao cnsg pensar em nada que nao seja aprovado por um banco central
Sim, isso é a pior parte, explicar de onde vem o dinheiro. Mas o que interessa é entrarem nesta rede social e ser recompensado pelo seu trabalho.