Back to Top Button with HTML, CSS and JavaScript | ความรู้ทั่วไปทางธุรกิจ

Creating HTML, CSS, JS files -> 0:27
Editing HTML -> 0:48 {
Adding icon -> 3:18
}
Editing CSS -> 4:10
Editing JS -> 7:16 {
Detecting when show the button go to top appears -> 7:34
Adding click event listener to button go to top -> 10:43
Going to JS & CSS to add animation properties to show the button go to top -> 12:34
Adding scroll behavior to give a slow motion when going to top -> 19:42 (Only add at the css file **html{ scroll-behavior: smooth }**)
Using JS to have more browser compatibility -> 20:47 (Take a look at this video to understand the function clear: https://www.youtube.com/watch?v=hPT1SSHptWA )
}

Muito obrigada

hi ,
mu que is wenever we use display none property is not working

noice

I've tried so many different codepen examples and nothing slows down the scrolling. I have Live Server installed for VS Code. I'm thinking I must have something wrong with my js firing in the browser. I've been at this for 4 or more hours. Any ideas why this would happen?

Great video, very clear explanations! Thank you for posting!!

Small question, is it possible to use percentage instant of px in java to determine when the button pops up?

thanks ! good tutorial :,)

hi ı want make a link that when clicked it will take it to the any where how can ı do that

Do we need to use a jquery tag in our HTML file in order for this to work?

Hello, good tutorial but the button does not come up when loading on mobile devices, it stays as it is like i haven't added .css or .js

Your code works perfectly on desktop for me. Thank you very much.

I have a problem on mobile (tested on two Samsung J7's).

Once the button is touched (hover) text color of button changes to white and background color changes to black and page scrolls back to top. So far, so good.

Now if I scrolled down again (without page refresh), the button reappears but does not change back to default black text color and white background-color. Button still works (scroll back to top) remains on hover state with white text color and black background-color.

I tried adding the following lines to smoothScrollBackToTop function
backToTopButton.style.color = "#fff";
backToTopButton.style.background-color = "#333";
But this did not work. Needless to say, I am a complete newbie.

Could you help me out?

Great tutorial. Subscribed 🙂

Very very nice! With all the details and everything! Bravo really great job!

Thanks!
Extremely helpful bro!
Keep it up!

Learned something from this however after implementing the smoothscroll using JS. My menu links do not smooth scroll anymore(I had used the html scroll behavior which you advised be disabled on implementing JS) though the backtotop button does work. Any idea thanks a lot.

Thanks.