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: ua-cam.com/video/hPT1SSHptWA/v-deo.html ) }
You're welcome dude! I thought that would be a good for somebody like me when I was looking for a index of the video! And I did it with love, and keep doing your awesome work!
This probably means that the "#gototopbtn" element (the button with id="gototopbtn") does not exist, so make sure that you have the .... If you do have it and you still get null, then maybe this is because the DOM is not ready yet at the point of JS script execution, so make sure that the JavaScript file is placed at the bottom of the page (right above the ). Hope this solves the problem! All the best, keep coding 😉🙂
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?
Hello! There is a link to this project in the description so that you can compare with your code. If you are taking the CSS route for smooth scrolling all you need to do is add the following to your CSS file: html { scroll-behavior: smooth; } If you want smooth scrolling with JavaScript, it's a bit more complicated and there is more room for error! My breaking point for being stuck at something is currently at 40 hours (but start boiling at 20...😂) Wishing you good luck and if it is absolutely impossible for you to figure it out, feel free to create a CodePen with the part you are trying to do and doesn't work and I could have a look! All the best!!
Percentage of what? If for example you mean percentage of view-port height you could do the following: let viewportHeight = window.innerHeight; let percentage = 50; // if for example you want it triggered once user scrolled 50% of viewportHeight let backToTopButtonTriggerPoint = (percentage/100) * viewportHeight; if (window.pageYOffset > backToTopButtonTriggerPoint) {...} else {...} Everything else remains the same. If you also want to take into account window resizing then you might also want to recalculate the trigger point upon a "resize" event. All the best, keep coding!!
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.
Hey! Well, in order to make the smoothscroll function a bit more general, so that is also works for anchor links, you could do the following adjustments: function smoothScroll(event) { // Notice the event argument. Also renamed the function since it is more general now event.preventDefault(); const targetPosition = (event.currentTarget.hasAttribute("href") && event.currentTarget.getAttribute("href")!=="#") ? document.querySelector(event.currentTarget.getAttribute("href")).offsetTop : 0; ...// Everything else remains the same } And, of course, you should add a "click" event listener to menu links so that this function is called upon a click event. I think this should work! Maybe watching my "Smooth Scroll with JavaScript" video would also help clarify things a bit more. Take care, keep it up!!!
Hey thanks man! I suppose you tried it with mobile at CodePen right? The button still works fine but the problem is that the chrome address bar (haven't tried other browsers) doesn't hide unless you reach the end of the page (and even then you still have to keep pushing in order to get to the end). I don't know if CodePen did this on purpose or if it is a bug. But the button is still there and working properly, you just can't see that part of the page due to this behavior...for example if for smaller screens you set the bottom position for the button to: bottom: 66px; instead of 6px (since the height of the address bar is around 60px) you will be able to see it! So, in conclusion, you can use the button and feel confident enough that it will behave the way it is supposed to 🙂 You could, for example, quickly upload this project (or any project using this button) to GitHub and host with GitHub Pages to make it live and check for yourself 😉🙂 Good luck, all the best!!
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?
Hey man! The persistence of hover state on touchscreens is a common issue 🙂 personally I don't mind, but there are quite a few solutions for this (none of them is perfect). I would'n touch JavaScript for this issue. One way to solve this would be by adding the following at the end of CSS file: @media (pointer: coarse) { #back-to-top-btn:hover { background-color: #fff; color: #333; } #back-to-top-btn:focus { background-color: #333; color: #fff; } } So by setting "pointer: coarse" you are targeting pointing devices of limited accuracy (such as finger for touchscreens). For mouse it is "pointer: fine". And from this point you can define the style you need (e.g. for button hover, focus, active...). Browser support is currently around 85% so this shouldn't be an issue. Ideally this media feature should be combined with @media (hover: none), so in order to ensure targeting of smartphones and touchscreens: @media (hover: none) and (pointer: coarse) { /* ... */ } however, for some reason this doesn't work on my smartphone which seems to be responding to @media (hover: hover)...so @media (pointer: coarse) it is 🙂 All the best man, keep coding 😉🙂
Thank you for a great tutorial. I've been using this code on my pages, but I have found that it doesn't appear properly on ipad or iphone. I placed a small graphic instead of a font and it looks and works great but the macOs isn't showing the graphic. Have you encountered this? -TIA
Hello! Unfortunately I currently don't have access to iPad or iPhone so that I can debug. No one mentioned this problem before, so I've never encountered this, to answer your question 🙂 It's a bit weird because this is quite a simple component, nothing fancy is being used. One thing I can imagine that could go wrong is if position: fixed; is not working properly on iOS Safari. A solution I found in stack-overflow would be to add transform: translate3d(0,0,0); to the fixed button, so: #back-to-top-btn { position: fixed; transform: translate3d(0,0,0); ... } I hope this works but, again, I'm just guessing here...All the best!!
@@CodingJourney Thank you for getting back to me! I tried this and it didn't help. Here is the address to one of the many pages that I put it on: www.astras-stargate.com/marsop2018.html You will see that it works great on pc/android! I am going to try changing the graphic to a font arrow--I'll let you know how that goes. I love how you say " enjoy the journey " at the end of your videos! Thanks again for your help.
Well, I went with the font and it did show up, only this page on my site: www.astras-stargate.com/astron.htm . Still on the ipad the button shows up as an oval, I've tried a number of settings and finally ended with border-radius: 50px; Still I really want the graphic I created--maybe I can turn it into a font or other icon.
Hiii 🙂 Very nice website!! I also like the retro style (all websites just seem so similar these days 😁). Again, both buttons (image and font awesome) work fine on my pc and android with all browsers, so I can't experience the issue you are describing 🙂 btw, border-radius: 50%; should do the job for a circular button (given of course that width and height are the same for the button). I agree that the image (.gif) icon, seems to fit better to the look and feel of your website than the font awesome one! Well, I suppose I can see why especially you, as a space explorer, can relate to the "enjoy the journey" line 🙂 After all...it's all about the journey 😉🙂
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: ua-cam.com/video/hPT1SSHptWA/v-deo.html )
}
Oh that's great man!! 👍 Thanks for taking the time to create this, absolutely love it 🙏💙🙂 All the best, keep coding!!! 😉
You're welcome dude! I thought that would be a good for somebody like me when I was looking for a index of the video!
And I did it with love, and keep doing your awesome work!
Thanks bro, you too!!!
Nice, thank you. Very clear non jumping here and there instruction. You simply the best
Oh thank you for the lovely comment 🙂 My pleasure, glad you liked it! You are the best! 💙💙
nice finally works...
Thanks
Super my pleasure!! 💙
Thank's Sir 🙏 , from Indonesia 🇮🇩
My pleasure, glad you liked it!! Warm greetings to Indonesia 🙂💙
great video, thanks
My pleasure 🙂 Glad you liked it! 💙
this was soooooooooooooooo helpful bro
Yeeeeei 🙂 Very glad to hear that!! Keep coding 😉💙
@@CodingJourney this was so helpful in my website that i am creating
Amazing! Good luck mate, all the best!!!
Great video, very clear explanations! Thank you for posting!!
Thank you 🙂 Very glad you enjoyed it!
Thanks, that was really helpful!
Oh thank you 🙂 Very glad it helped!!
Very very nice! With all the details and everything! Bravo really great job!
Hey man! Thanks for the lovely comment, much appreciated!! Keep coding 😉🙂
my button is solid, it is not responding to the scrollbar, what could be the problem?
Perfect, I'm using this button in my project! Thank you very much :)
Thanks man! Delighted to hear that 🙂
Thanks!
Extremely helpful bro!
Keep it up!
Thanks man! Glad you liked it. You too, keep going!!!
Thank you very much!! You helped me a lot!
Amazing! Very glad to hear that 🙂
thanks ! good tutorial :,)
My pleasure! Very glad you liked it 🙂
thanks a lot
My pleasure 🙂 Glad you liked it!
Thanks.
hi ,
mu que is wenever we use display none property is not working
Thank you
Thanks man! Love what your are doing with your channel and website. Some amazing, creative, quality content in there 🙂 Keep up the great work!!
Very kind of you. You have a great channel. Looking forward to more videos.
Maravilhoso
Muito obrigada
My pleasure 🙂 Glad you liked it!
Great tutorial. Subscribed :)
Thanks man! Welcome aboard 😉🙂
Thanks U
Pleasure is all mine!! 🙂
noice
I have a problem with the code, that 𝚌𝚘𝚗𝚜𝚝 𝚞𝚙𝚋𝚞𝚝 = 𝚍𝚘𝚌𝚞𝚖𝚎𝚗𝚝.𝚚𝚞𝚎𝚛𝚢𝚂𝚎𝚕𝚎𝚌𝚝𝚘𝚛("#𝚐𝚘𝚝𝚘𝚝𝚘𝚙𝚋𝚝𝚗"); is showing 𝚗𝚞𝚕𝚕.
This probably means that the "#gototopbtn" element (the button with id="gototopbtn") does not exist, so make sure that you have the .... If you do have it and you still get null, then maybe this is because the DOM is not ready yet at the point of JS script execution, so make sure that the JavaScript file is placed at the bottom of the page (right above the ). Hope this solves the problem! All the best, keep coding 😉🙂
Hai sir..
👋🙂
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?
Hello! There is a link to this project in the description so that you can compare with your code. If you are taking the CSS route for smooth scrolling all you need to do is add the following to your CSS file:
html {
scroll-behavior: smooth;
}
If you want smooth scrolling with JavaScript, it's a bit more complicated and there is more room for error! My breaking point for being stuck at something is currently at 40 hours (but start boiling at 20...😂) Wishing you good luck and if it is absolutely impossible for you to figure it out, feel free to create a CodePen with the part you are trying to do and doesn't work and I could have a look! All the best!!
Small question, is it possible to use percentage instant of px in java to determine when the button pops up?
Percentage of what? If for example you mean percentage of view-port height you could do the following:
let viewportHeight = window.innerHeight;
let percentage = 50; // if for example you want it triggered once user scrolled 50% of viewportHeight
let backToTopButtonTriggerPoint = (percentage/100) * viewportHeight;
if (window.pageYOffset > backToTopButtonTriggerPoint) {...}
else {...}
Everything else remains the same. If you also want to take into account window resizing then you might also want to recalculate the trigger point upon a "resize" event.
All the best, keep coding!!
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.
Hey! Well, in order to make the smoothscroll function a bit more general, so that is also works for anchor links, you could do the following adjustments:
function smoothScroll(event) { // Notice the event argument. Also renamed the function since it is more general now
event.preventDefault();
const targetPosition = (event.currentTarget.hasAttribute("href") && event.currentTarget.getAttribute("href")!=="#") ? document.querySelector(event.currentTarget.getAttribute("href")).offsetTop : 0;
...// Everything else remains the same
}
And, of course, you should add a "click" event listener to menu links so that this function is called upon a click event. I think this should work! Maybe watching my "Smooth Scroll with JavaScript" video would also help clarify things a bit more. Take care, keep it up!!!
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
Hey thanks man! I suppose you tried it with mobile at CodePen right? The button still works fine but the problem is that the chrome address bar (haven't tried other browsers) doesn't hide unless you reach the end of the page (and even then you still have to keep pushing in order to get to the end). I don't know if CodePen did this on purpose or if it is a bug. But the button is still there and working properly, you just can't see that part of the page due to this behavior...for example if for smaller screens you set the bottom position for the button to: bottom: 66px; instead of 6px (since the height of the address bar is around 60px) you will be able to see it!
So, in conclusion, you can use the button and feel confident enough that it will behave the way it is supposed to 🙂 You could, for example, quickly upload this project (or any project using this button) to GitHub and host with GitHub Pages to make it live and check for yourself 😉🙂 Good luck, all the best!!
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?
Hey man! The persistence of hover state on touchscreens is a common issue 🙂 personally I don't mind, but there are quite a few solutions for this (none of them is perfect). I would'n touch JavaScript for this issue. One way to solve this would be by adding the following at the end of CSS file:
@media (pointer: coarse) {
#back-to-top-btn:hover {
background-color: #fff;
color: #333;
}
#back-to-top-btn:focus {
background-color: #333;
color: #fff;
}
}
So by setting "pointer: coarse" you are targeting pointing devices of limited accuracy (such as finger for touchscreens). For mouse it is "pointer: fine". And from this point you can define the style you need (e.g. for button hover, focus, active...). Browser support is currently around 85% so this shouldn't be an issue. Ideally this media feature should be combined with @media (hover: none), so in order to ensure targeting of smartphones and touchscreens:
@media (hover: none) and (pointer: coarse) {
/* ... */
}
however, for some reason this doesn't work on my smartphone which seems to be responding to @media (hover: hover)...so @media (pointer: coarse) it is 🙂
All the best man, keep coding 😉🙂
@@CodingJourney Thank you so much. Will try it.
Thank you for a great tutorial. I've been using this code on my pages, but I have found that it doesn't appear properly on ipad or iphone. I placed a small graphic instead of a font and it looks and works great but the macOs isn't showing the graphic. Have you encountered this? -TIA
Hello! Unfortunately I currently don't have access to iPad or iPhone so that I can debug. No one mentioned this problem before, so I've never encountered this, to answer your question 🙂 It's a bit weird because this is quite a simple component, nothing fancy is being used. One thing I can imagine that could go wrong is if position: fixed; is not working properly on iOS Safari. A solution I found in stack-overflow would be to add transform: translate3d(0,0,0); to the fixed button, so:
#back-to-top-btn {
position: fixed;
transform: translate3d(0,0,0);
...
}
I hope this works but, again, I'm just guessing here...All the best!!
@@CodingJourney Thank you for getting back to me! I tried this and it didn't help. Here is the address to one of the many pages that I put it on: www.astras-stargate.com/marsop2018.html You will see that it works great on pc/android! I am going to try changing the graphic to a font arrow--I'll let you know how that goes. I love how you say " enjoy the journey " at the end of your videos! Thanks again for your help.
Well, I went with the font and it did show up, only this page on my site: www.astras-stargate.com/astron.htm .
Still on the ipad the button shows up as an oval, I've tried a number of settings and finally ended with border-radius: 50px; Still I really want the graphic I created--maybe I can turn it into a font or other icon.
Hiii 🙂 Very nice website!! I also like the retro style (all websites just seem so similar these days 😁). Again, both buttons (image and font awesome) work fine on my pc and android with all browsers, so I can't experience the issue you are describing 🙂 btw, border-radius: 50%; should do the job for a circular button (given of course that width and height are the same for the button). I agree that the image (.gif) icon, seems to fit better to the look and feel of your website than the font awesome one! Well, I suppose I can see why especially you, as a space explorer, can relate to the "enjoy the journey" line 🙂 After all...it's all about the journey 😉🙂
Do we need to use a jquery tag in our HTML file in order for this to work?
Hey 🙂 No! I'm not using jQuery here. This is done with vanilla JavaScript.
@@CodingJourney thank you so much! works perfectly! does this usually work on all browsers besides chrome, internet explorer, etc?
hi ı want make a link that when clicked it will take it to the any where how can ı do that
use
window.scrollTo (0, 0)
this will take you to the top of the page
adjust the X and Y coordinates respectively for a different result
عبدالله ايش تسوي هون 🌚🌚
Can you teach how to lazy load images?
That's another nice topic! I will add it to my ever-expanding list of possible future projects :) Thanks for the suggestions!
@@CodingJourney I also have so many request :) also consider doing a content slider or testimonial slider.
. . . Enjoy c c c c
c J c the
c c Journey! ! !
c c
c c
c
That's amazing!! Thaaaaaaanks :)
My button is solid, it is not responding to the scrollbar, what could be the problem?