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: kzfaq.info/get/bejne/nraEZLaErdbYh3U.html ) }
@CodingJourney3 жыл бұрын
Oh that's great man!! 👍 Thanks for taking the time to create this, absolutely love it 🙏💙🙂 All the best, keep coding!!! 😉
@eufraniodiogo503 жыл бұрын
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!
@CodingJourney3 жыл бұрын
Thanks bro, you too!!!
@Samsul20133 жыл бұрын
Nice, thank you. Very clear non jumping here and there instruction. You simply the best
@CodingJourney3 жыл бұрын
Oh thank you for the lovely comment 🙂 My pleasure, glad you liked it! You are the best! 💙💙
@adamforgac59722 жыл бұрын
nice finally works... Thanks
@CodingJourney2 жыл бұрын
Super my pleasure!! 💙
@tuxeduck3 жыл бұрын
Great video, very clear explanations! Thank you for posting!!
@CodingJourney3 жыл бұрын
Thank you 🙂 Very glad you enjoyed it!
@pengamat903 жыл бұрын
Thank's Sir 🙏 , from Indonesia 🇮🇩
@CodingJourney3 жыл бұрын
My pleasure, glad you liked it!! Warm greetings to Indonesia 🙂💙
@papanos144 жыл бұрын
Very very nice! With all the details and everything! Bravo really great job!
@CodingJourney4 жыл бұрын
Hey man! Thanks for the lovely comment, much appreciated!! Keep coding 😉🙂
@andrew.schaeffer40322 жыл бұрын
great video, thanks
@CodingJourney2 жыл бұрын
My pleasure 🙂 Glad you liked it! 💙
@albertofreddo22494 жыл бұрын
Perfect, I'm using this button in my project! Thank you very much :)
@CodingJourney4 жыл бұрын
Thanks man! Delighted to hear that 🙂
@ruelporter10232 жыл бұрын
my button is solid, it is not responding to the scrollbar, what could be the problem?
@thebikingkat3 жыл бұрын
Thanks, that was really helpful!
@CodingJourney3 жыл бұрын
Oh thank you 🙂 Very glad it helped!!
@shashwatshandilya78533 жыл бұрын
this was soooooooooooooooo helpful bro
@CodingJourney3 жыл бұрын
Yeeeeei 🙂 Very glad to hear that!! Keep coding 😉💙
@shashwatshandilya78533 жыл бұрын
@@CodingJourney this was so helpful in my website that i am creating
@CodingJourney3 жыл бұрын
Amazing! Good luck mate, all the best!!!
@soban42045 жыл бұрын
Thanks! Extremely helpful bro! Keep it up!
@CodingJourney5 жыл бұрын
Thanks man! Glad you liked it. You too, keep going!!!
@timothyzhukov11594 жыл бұрын
Thank you very much!! You helped me a lot!
@CodingJourney4 жыл бұрын
Amazing! Very glad to hear that 🙂
@ruelporter10232 жыл бұрын
My button is solid, it is not responding to the scrollbar, what could be the problem?
@axelpo93904 жыл бұрын
thanks ! good tutorial :,)
@CodingJourney4 жыл бұрын
My pleasure! Very glad you liked it 🙂
@sakshamkapoor59054 жыл бұрын
Great tutorial. Subscribed :)
@CodingJourney4 жыл бұрын
Thanks man! Welcome aboard 😉🙂
@omkarsalave17263 жыл бұрын
hi , mu que is wenever we use display none property is not working
@cesaribanez22763 жыл бұрын
thanks a lot
@CodingJourney3 жыл бұрын
My pleasure 🙂 Glad you liked it!
@bikramchettri94055 жыл бұрын
Thanks.
@inqmusician24 жыл бұрын
I have a problem with the code, that 𝚌𝚘𝚗𝚜𝚝 𝚞𝚙𝚋𝚞𝚝 = 𝚍𝚘𝚌𝚞𝚖𝚎𝚗𝚝.𝚚𝚞𝚎𝚛𝚢𝚂𝚎𝚕𝚎𝚌𝚝𝚘𝚛("#𝚐𝚘𝚝𝚘𝚝𝚘𝚙𝚋𝚝𝚗"); is showing 𝚗𝚞𝚕𝚕.
@CodingJourney4 жыл бұрын
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 😉🙂
@luanacristinar.goncalves40853 жыл бұрын
Muito obrigada
@CodingJourney3 жыл бұрын
My pleasure 🙂 Glad you liked it!
@ticcingqueer61404 жыл бұрын
Small question, is it possible to use percentage instant of px in java to determine when the button pops up?
@CodingJourney4 жыл бұрын
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!!
@Frankslaboratory5 жыл бұрын
Thank you
@CodingJourney5 жыл бұрын
Thanks man! Love what your are doing with your channel and website. Some amazing, creative, quality content in there 🙂 Keep up the great work!!
@Frankslaboratory5 жыл бұрын
Very kind of you. You have a great channel. Looking forward to more videos.
@JimKernix3 жыл бұрын
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?
@CodingJourney3 жыл бұрын
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!!
@luanacristinar.goncalves40853 жыл бұрын
Maravilhoso
@Youssef-lv6wp4 жыл бұрын
Thanks U
@CodingJourney4 жыл бұрын
Pleasure is all mine!! 🙂
@TechAlphax5 жыл бұрын
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.
@CodingJourney5 жыл бұрын
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!!!
@UncleAypee4 жыл бұрын
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
@CodingJourney4 жыл бұрын
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!!
@Astras-Stargate4 жыл бұрын
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
@CodingJourney4 жыл бұрын
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!!
@Astras-Stargate4 жыл бұрын
@@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.
@Astras-Stargate4 жыл бұрын
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.
@CodingJourney4 жыл бұрын
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 😉🙂
@samutprakarn2724 жыл бұрын
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?
@CodingJourney4 жыл бұрын
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 😉🙂
@samutprakarn2724 жыл бұрын
@@CodingJourney Thank you so much. Will try it.
@kathleewong94484 жыл бұрын
Do we need to use a jquery tag in our HTML file in order for this to work?
@CodingJourney4 жыл бұрын
Hey 🙂 No! I'm not using jQuery here. This is done with vanilla JavaScript.
@kathleewong94484 жыл бұрын
@@CodingJourney thank you so much! works perfectly! does this usually work on all browsers besides chrome, internet explorer, etc?
@vince80934 жыл бұрын
hi ı want make a link that when clicked it will take it to the any where how can ı do that
@steviewonder5804 жыл бұрын
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
@mrrhm_tech4 жыл бұрын
Hai sir..
@CodingJourney4 жыл бұрын
👋🙂
@suyasi55023 жыл бұрын
noice
@bikramchettri94055 жыл бұрын
Can you teach how to lazy load images?
@CodingJourney5 жыл бұрын
That's another nice topic! I will add it to my ever-expanding list of possible future projects :) Thanks for the suggestions!
@bikramchettri94055 жыл бұрын
@@CodingJourney I also have so many request :) also consider doing a content slider or testimonial slider.
@hyxatubislcn87465 жыл бұрын
. . . Enjoy c c c c c J c the c c Journey! ! ! c c c c c