9: Animated scroll to a section on page load - Learn jQuery front-end programming

Animated scroll to a section on page load - Learn jQuery front-end programming. In this lesson, we will learn how to scroll to a section on a sub-page, after loading the new page. We will also learn how to do this with a smooth scrolling animation.

➤ GET ACCESS TO MY LESSON MATERIAL HERE!

First of all, thank you for all the support you have given me!

I am really glad to have such an awesome community on my channel. It motivates me to continue creating and uploading content! So thank you!

I am now using Patreon to share improved and updated lesson material, and for a small fee you can access all the material. I have worked hard, and done my best to help you understand what I teach.

I hope you will find it helpful :)

[LeafyVerseYT]

Thank you for all that you do. No ads will be skipped.

[tomasslezak]

You are the best. Please continue with this series.

[josephjasonbuhain]

The direct href="subpage.html#section3" now works without javascript so people reading this right now won't probably see the animation.
Replace the "#" in the href with like "?" or any symbol and change the lastIndexOf argument into that symbol and you will see it works.

[JustAlexV]

I'd like to see for example how to hide side menu(just text, not icons) while scrolling and to be fixed. Btw I like your tuts very much, great teacher! Keep it going.
P.S. Would be awesome to see Laravel or CodeIgniter tutorials from you ;)

[deveagle]

Nice work! Would LOVE to know how to do this with "Vanilla JS", since most employers are frowning upon jQuery now and are demanding knowledge of Vanilla JS

[lg]

Thank you for making these awesome tutorials! They really helped me out. Keep up the good work!!

[FordExplorer-rmew]

Been coding 6 hours today,
finally back at it and not sucking nor as blackpilled.

I suck at UI design like all the adobe programs, sourcing static assets, making SVGs, making layout non boxy, responsive etc etc.

Probs gonna come here for anything C# and PHP related.

Doing JS + materialize + firebase
Trying to have 2 floating action buttons in materialize one for scroll to top and one for social media & share intents

All of these coding tutorials,
You, Traversy media, Net Ninja, Kevin Powell, Web Dev Simplified, Chris Hawkes, Caleb Curry

Are you guys in a multi channel network or something? A freeCodeCamp sponsor type of thing?
Seems you all cross reference each other.

[krzysztofwelc]

no way, best programming chanel at YT!

[hussamabuemmera]

Hi, thanks for the tuts, really very helpful. Would you please do a tutorial on how to use jquery to have a wishlist that uses cookies or local storage

[fakepram]

thank you very much for this tutorial!

[CredixNetwork]

I usually use this code:
$(document).ready(function() { //When Document loads
{ //When something that has slide section as class
var linkHref = $(this).attr('href'); //Variable, storing what element slide section is pointing to

$('html, body').animate({ //Animates body scolling to
scrollTop: $(linkHref).offset().top + 1 //the object (linkHref) (+1 is optional, means it scrolls a pixel more)
}, 1000); //1000 means 1000ms which is 1 second

e.preventDefault(); //Prevents href from showing in url
});
}); //Hope you can understand the code

[El_ii]

Hey Great Tutorial! I have a question How to make a Horizontal slideshow of items in Jquery?

[killmix-plays]

do you have tutorial for codeigniter when you sign up and register the page is automatically scroll down to the section of sign up to see if successful or failed sign up

[vineetprajapati]

can you make a tutorial on how to make scrollwheel animate or scroll more on single scroll!

[klivecorps]

I am having trouble in making "time ago " in PHP. I want to make a post or comment system that shows time of that comment but in " ago" method. like in Facebook or YouTube, it says video 20 minutes ago, I hope you understood and got my point. please make a video on it. in php

[MilanB]

Can you do a tutorial which explains how to show additional elements on page while scrolling? Such as when user scrolls for ex: 400px down a picture or some content slides from the left?

[semhak]

Hi there! Love your tutorials. Would you by any chance be able to chare the html, css and js files of this project? It looks like a great starter template for a website project!

[SalmanAnsari-djwx]

Hey, I am using the same code but an error occur in the console say "cannot read properties of undefined ( reading 'top')". please help me out

[khanshahin]

i like to see how do i click dynamic link

[reaganfernandes]

I don't want to get that #id name in the URL. can u tell me a better solution to that?