Pure CSS Smooth Scrolling Animation With Just 1 Line of Code

In this tutorial, we will learn how to add "Pure CSS Smooth Scrolling Animation With Just 1 Line of Code". Want to be creative? Then watch this tutorial till the end.
Adding smooth scrolling in a website is now compulsory. Because it will make your website more professional and user friendly. And we can add smooth scrolling in our website using just CSS only. And we don't have to write a bunch of code. We just have to write only one line of code in CSS. And its too simple.
#Smooth_Scrolling #Smooth_Scrolling_CSS
Create animated website(Tutorial), which we have discussed in
0:00 Intro
0:27 Create Fully Professional Responsive Animated Website Using HTML & CSS
• Responsive Animated We...
All Source Codes: www.buymeacoffee.com/tech2etc
Github: github.com/tech2etc
⛔❌Do Not CLICK This Link: bit.ly/3lJLyLY
Need any help? Join my Discord: / discord
SUPPORT ME:
👕 Merchandise: tech2etc.com/merchandise
🎁 Buy Me A Coffee www.buymeacoffee.com/tech2etc
🎀 Donate Me By Paypal: www.paypal.com/paypalme/tech2etc
How To Make MONEY Online - My 4 Favorite Tricks:
👨‍💻 Start Freelancing: tech2etc.com/fiverrcpa
🛒 Learn Digital Marketing: tech2etc.com/digital-marketing
📹 Make Video Editing As Profession: tech2etc.com/video-editing
🕔 Next trick will be revealed at the right time.
Free Course to Improve SKILLS & EARN:
1️⃣ WordPress Insider: tech2etc.com/wordpress-course
2️⃣ Bootstrap With Projects: tech2etc.com/bootstrap
3️⃣ Web Development For Beginners: tech2etc.com/webdev
4️⃣ JavaScript With Projects: tech2etc.com/javascript
5️⃣ Python With Projects: tech2etc.com/python
🎁 Get Certificate: courses.tech2etc.com/
Important Links:
📂 Best Hosting: tech2etc.com/best-hosting
📂 Best CV Resume: tech2etc.com/my-resume
📂 Freelancing Guide: tech2etc.com/learn-freelancing
📂 Interview Questions: tech2etc.com/?s=interview
DISCLAIMER: This description contains affiliate links. Which means I may receive a small commission on affiliate links used. This helps support the channel and allows us to continue to make videos like this. All content used within the parameters of fair use.
===============================
Connect with me & get daily updates👇
===============================
Discord: / discord
Instagram: / fahimulkabir.tech2etc
Twitter: / tech2etc
LinkedIn: / fahimulkabirchowdhury
FB (Personal): / md.fahimkabirhamim
FB Page: / tech2etc
FB Group: / 2424642430907565
------------------------------Track-------------------------
Music provided by : NoCopyrightSounds
Watch: www.youtube.com/watch?v=q1ULJ...
Free Download / Stream: ncs.io/feelgood

[@Tech2etc]

Hey Guys! Please support me 💪
Please Help Me to Reach 200K SUBSCRIBERS Goal 🙏

[@gleanfact8318]

I subscribed

[@farazedits8060]

Hello Sir!!
I want full tutorial of this website but the link that you had given in the description is working.
Hope you'll help me.

[@Tech2etc]

@@farazedits8060 ok i Will update that link in a moment. In the meanwhile please do checkout that video in the channel.

[@vanhelsingx69x]

gotcha bro

[@vidhijainn2718]

can you please share me the full video of this video

[@mr.incognito8426]

Just one piece of code made me wonder how everyone's website is so beautiful, now i'm getting the point . Just one line code made it awesome . Thankyou bhai

[@Tech2etc]

Welcome

[@Deix25]

This is exactly what I was looking for! Thank you so much for the tutorial.

[@Tech2etc]

Glad it was helpful!

[@Asha0224]

I was also searching this for two days..... Finally got it thank you sir 😊

[@Indeed007]

..thx bud! Literally had no idea! ..Huge difference it makes, and very very simple too, wow. I've been developing for a while now and somewhat an experienced user but literally had no idea about this. Thank you again bro! 👍

[@Tech2etc]

Glad u enjoyed

[@songpitou5831]

I literally spent 1hr trying to find this. Thank you man, god bless you!!

[@Tech2etc]

Glad you liked it

[@MrBonbatong]

same for me, the whole afternoon!

[@warrengaytero1682]

i never skip the ads because its the only way i can thank you..keep growing GodBless

[@Tech2etc]

Thanks a lot♥😂

[@MrBonbatong]

I've been looking for this line code for the whole day! Thanks for sharing

[@Tech2etc]

Welcome

[@mophgaming7312]

Thank You Man! I have found what i have been looking for! U earn a VERY GREAT SUB!!!

[@GuilhermeRibeirodeSouza92]

Awesome! I was looking for this, thank you!!
A simple thing that makes a great diference!

[@erich2s_0103]

Wow, that amazing!! just pure css!

[@krstev29]

Thanks you very much. I needed the smooth scrolling thing for a school project and i didn't know how to do it. I am definetilly liking

[@Tech2etc]

Your very welcome

[@SacredSadhaka]

I was searching for it like hell dude, Thx a ton for this 🙏🙏🙏

[@Tech2etc]

Glad u enjoyed

[@elitism3783]

//This is all what you need :
html {
Scroll-behavior :smooth ;
}

[@zatchiedits]

uh no

[@arnabsaha8436]

It's amazing. Just one line code and the magic. Thank you Tech2 etc.

[@Tech2etc]

Glad u enjoyed

[@AyshaBlogsStuff]

First the smooth scroll didnt work for me but then i realized i didnt turn on my watch sass! thank you so much, worked perfectly

[@Tech2etc]

Great.. Carry on

[@pavithraselvaraj8919]

thank you so much🙇‍♀️ its seriously helped me alot 😭💕 im able to finished my project🥳

[@Tech2etc]

Glad it helped.

[@naitikbhavsar4195]

It's amazing. Just one line code and the magic

[@kbotman5228]

OMG dude you are genius! Thank you so much bro , you deserve more subs

[@Tech2etc]

Glad u enjoyed

[@ebohbliss167]

This is exactly what i needed
God bless you❤❤

[@nadianoversega2301]

Thankyou very much for this video. Helps me a lot as I am jus started learning. Many respect for you!! 🙏🏻🙏🏻

[@Tech2etc]

Glad u enjoyed

[@bpratikvinod8110]

Love you bhai, yahi search kar raha tha kabse

[@danangwic]

finally i found this one, thank u sir for this useful videos!

[@Tech2etc]

Glad it helped.

[@swibay]

Man you are awesome! Much love from Tanzania

[@Tech2etc]

Thank you my friend

[@seeker3794]

Your explanation is just what feel mine👍

[@DeanT.]

Thank you sir! Bless you

[@AdonaiChristopher-vo5qj]

You've just earned a subscriber

[@user-jl1hl5vo6s]

Bro you solved my a big problem , I wanted to scroll down my page directly and other youtubers were fucking messing up with JS and didnt tell me to just give id name of perticular div with id dymbol ! , love you bro !1

[@codewithatharv]

Thanks man!

[@adonis8130]

Thankyou soo much

[@sfusergroupkhi]

Great as usual💓

[@Tech2etc]

Thanks u dear.

[@mehmetsahzengin1974]

I appreciate it bro

[@gleanfact8318]

Exactly I am looking for these totorial
Thanks a lot

[@Tech2etc]

Most welcome

[@ProtechBD1]

That's Great!!

[@WaesEnvi]

thankkss brooo!

[@harshmirdhwal]

You are so great, Thank YOU !! so much

[@Tech2etc]

welcome

[@digitalution]

Awesome just one line :)

[@ayenewyihune]

You save me lots of time, thanks

[@Tech2etc]

Your most welcome. Please share this project on your social media. Will appreciate that.

[@berylsam889]

Thanks for the tutorial. I just had a doubt, what did you code for the divs to fade in, every time you had visited a section in the page?

[@Tech2etc]

Have a full tutorial on that. Tutorial link given in the description.

[@codefoxes]

data-aos="fade-up"

[@codefoxes]

add this to your html wherever you wanted

[@alreadydestroyed4838]

Thanks alot sir 💜

[@-mr.random-7837]

Thank you Sir ! It's worked

[@Tech2etc]

You're welcome!

[@TK-wp3iw]

thanks 😄

[@shreyapakhare4303]

Simply amazing brother

[@Tech2etc]

Thank you

[@marcelee124]

Thank you so much!

[@Tech2etc]

Most welcome

[@user-sl9lr7en6k]

thanks bro

[@mofarih]

thank you sooooo much!

[@Tech2etc]

Welcome

[@waasanime2335]

THANK YOU !

[@Tech2etc]

Your most welcome. Please share this project on your social media. Will appreciate that.

[@monkyout]

Thanks sir.

[@tuvshin666]

i finding this so long :D

[@TLopez341]

Thank you!

[@Tech2etc]

Most welcome

[@davicunda6736]

thank you bro!!!!

[@Tech2etc]

Most welcome

[@Emotion_Mystery]

Bro ,you can not tell the whole concept of image how your image was animated up to down 😔😔😔😔😔😔😔😔

[@KS_Studioz]

Aos animation library

[@animeku4812]

what is the name of the transition you used in the video ?
like transition card

[@priyanshluthra3842]

Thanku bro :)

[@Tech2etc]

Most welcome.

[@hojaifahossain4269]

Thanks Bro.

[@Tech2etc]

Most welcome

[@felixamantillo7870]

I knew it❤️💖

[@indieshd]

wow! nice tutorial bro

[@Tech2etc]

Thanks bro

[@b_arts8073]

Thank you so much

[@Tech2etc]

Most welcome

[@bigmggaming3146]

thank you

[@Tech2etc]

Your most welcome. Please share this project on your social media. Will appreciate that.

[@adrianosantos1970]

Muito bom

[@HairyBosnian03]

THANK YOU

[@Tech2etc]

Glad u enjoyed

[@aalaeytb]

helpful ❤

[@avgGamer662]

Thanks Bhai

[@Tech2etc]

Welcome

[@omarmahmoud8904]

Thanks a lot

[@Tech2etc]

Most welcome

[@Developersdiaries]

thnks for hellping
🎉🎉

[@user-lc7qs7gy5d]

And here i am thinking is something new , Yes those who do not know about much scrolling will be wonder but ! video can be 30Sec also , bro try to make 30sec short vid and see viral

[@rafael7425]

thanks man

[@Tech2etc]

Glad u enjoyed

[@yz1915]

hey friend. Many thanks for that but i've got small problem that on my website appears a black dot on a left top corner after adding # for scroll
Many thanks!

[@arsheonix5893]

His voice is like soul mortal

[@eduardoguedes6760]

Thanksssssss

[@Tech2etc]

Most welcome

[@shyamprakashm6325]

When you scroll the website how do that div boxes comes relative to scroll? Which animation are you using?

[@Tech2etc]

WATCH the Tutorial.... link given in the top right i button & also in the description

[@mohammedjunaihd8556]

It's a jquery

[@AdityaRaj-lj5wf]

it's in js file a property called "offset" decides that.

[@michaelpinkrah4439]

Hello, how would I take a page like this and make it multiple separate pages.

[@anshab123]

Thanks bro

[@Tech2etc]

welcome

[@karolpetruczenko5805]

thx bro

[@Tech2etc]

Welcome

[@footballxeditz7475]

thanks

[@Tech2etc]

You're welcome!
More projects are coming soon.
Please share this project on your social media. It will help us. Thanks.

[@user-po3ms7wk8o]

how do you make a sticky nav bar please i need to know how to do it

[@11valdano]

The scrolling is not the same on the finished site compared to the one you "coded".

[@Tech2etc]

Yes, i gave that video tutorial also in the card.

[@TaiNguyen-mi4tn]

love u

[@dhruvjoshi1986]

Bro I have one issue with this , When I click on Contact button than it scroll down ok, but than i reload the web page at that time they direct open contact section .
please solve this error..

[@shashikantm9135]

Super sir please make video on how to host website live 🙏

[@Tech2etc]

Please check on our channel. We have already created some tutorials about it.

[@1DonFF]

How to get the polyp animation?

[@UttamRajGiri-nj5tw]

How to make it work in multiple pages?

[@acefluke6040]

do you have source code?

[@luanamendonca]

i had a long time trying this........i found that i needed to have windows animations activated... 🤣🤣

[@ashwins1936]

How to adjust the position.. my second slide's position is not perfect..Which property i should use to adjust the position... When it scroll down it scrolls little up.. I want to make it little down

[@Tech2etc]

U can use offset or height .... there are many several way to do it.

[@vrushtimorabia9829]

Nice

[@Tech2etc]

Thanks a lot

[@aryankhokhar2971]

but bro when you add smooth effectin last of video it's too fast not like in starting of video

[@joshuaikhine1669]

Please how did you add those animations

[@Tech2etc]

Check the description for that tutorial.

[@thepolesHD]

I dont get why some websites have lots of js jquery code for this and in css is just one line...

[@7tno]

i need help it didn't work with me

[@pemadechen9901]

html{scroll-behavior:smooth;}
For future reference

[@master138]

4:35

[@minhazursarker1997]

দিন দিন ফ্যান হয়ে যাচ্ছি ভাই।ভাই,ইংলিশে তো আমরা গুটি কয়েকজন বুঝি।বাংলা ভার্সনেও দিয়েন ভাই।দেশের মানুষের জন্য

[@Tech2etc]

Obosshoi vai....age ei channel ta ektu establish kore feli, then arekta channel khulbo just bangla te...

[@vedanttiwari3112]

With just one line of code?

[@ndegwakaranja.9674]

hey man i was looking for a way to make the words in my website appear the way yours do when you scroll down the page. This video didn't answer the question i was hopping

[@Tech2etc]

Hi! Those was actually scroll animation. I have added the full tutorial link of that website in the description. You can check that out.

[@pitterquenallata]

Habilita la seccion de subtitulos de yotube para LATAM
porfa

[@angelcg635]

Grandreeeee

[@Tech2etc]

Obrigado querida

[@alicarryme]

Doesn't work with safari on iphone

[@cheaptuber641]

❤❤❤

[@MinhazurSarker]

এর আগের কমেন্ট টা অন্য জিমেইল থেকে ভাই।

[@priyabhardwaj9530]

U did not show the css program bro