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!!!

Oh thank you for the lovely comment 🙂 My pleasure, glad you liked it! You are the best! 💙💙

Super my pleasure!! 💙

Thank you 🙂 Very glad you enjoyed it!

My pleasure, glad you liked it!! Warm greetings to Indonesia 🙂💙

Hey man! Thanks for the lovely comment, much appreciated!! Keep coding 😉🙂

My pleasure 🙂 Glad you liked it! 💙

Thanks man! Delighted to hear that 🙂

Oh thank you 🙂 Very glad it helped!!

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!!!

Thanks man! Glad you liked it. You too, keep going!!!

Amazing! Very glad to hear that 🙂

My pleasure! Very glad you liked it 🙂

Thanks man! Welcome aboard 😉🙂

My pleasure 🙂 Glad you liked it!

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 😉🙂

My pleasure 🙂 Glad you liked it!

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!!

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.

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!!

Pleasure is all mine!! 🙂

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!!

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 😉🙂

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.

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?

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

👋🙂

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.

That's amazing!! Thaaaaaaanks :)