ilonacodes
Patreon
Investor Profile
Contact

Financial tips and advice on investment for developers:
"Learn how to free extra monthly cash from your dev-salary for investment"

There are so many different ways to free money for investments without thinking of getting another job. Download my Top-15 cash-freeing tips cheat sheet.

Get my 15 Tips to Invest More Cash Monthly!
8
Mar
2018
#scrolling
#jquery
#javascript
#frontend
#learntocode
#animate
#coding
#letsgetcoding
#womenwhocode

Front-end Shorts: How to Scroll to Element in jQuery With Animation

8 Mar, 2018

Here I am back and decided to continue blogging with front-end shorts. Unfortunately, I don’t have enough time to write big posts, but I would be happy to share some frontend tips and tricks that I have already applied for some of my projects.

The last days I had to work with Javascript and jQuery a lot apart from React and spent much time on creating templates. As you know, nowadays modern web pages include animated scrolling, which makes any site look professional and more elegant (instead of simple link element reference in HTML5).

The user story was:

When the user clicks on the button,
the page scroll to the specific element with a nice animation.

That forced me, to use jQuery scrollTop animation. Assuming there is a button, with the id “button”:

$("#button").click(function() {
    $('html, body').animate({
        scrollTop: $("#elementToScroll").offset().top
    }, 1000);
});

In this case, we are scrolling the height of the element. offset() return the coordinates of the element relative to the DOM, and top param gives us the element’s distance in pixels along the y-axis.

Thank you for reading. I hope you like this small jQuery animation tip.

Tags | #scrolling #jquery #javascript #frontend #learntocode #animate #coding #letsgetcoding #womenwhocode
Next: Ada Lovelace Festival 2017 in Berlin

My name is Ilona, and I'm a software engineer, founder, and blogger who is (besides programming) also passionate about startups, finance and investment

"I like to work hard for things that are worth it."
The latest articles:
Numbrs Review - App For Personal Finances (Germany & UK only)
How Developers Can Get Symbols From Stock Indexes With Python
Bitcoin Profit Calculator For Developers

Imprint
Privacy Policy
© 2021 ilonacodes
© 2021 ilonacodes
Imprint
Privacy Policy