Back to Top Button with HTML, CSS and JavaScript

14
2



Learn how to add a functional Back to Top Button to your projects, using HTML, CSS and JavaScript.

Button entrance and exit is animated using CSS animations.

Smooth scrolling effect is also added, at first with a CSS-only solution, and then with JavaScript, in order to achieve cross-browser compatibility.

Code for this Project:

Suggested Videos:
Font Awesome 5 Icons:
Animations with Animate.css:
Smooth Scroll with CSS:
Smooth Scroll with JavaScript:
JavaScript Loops:

Thanks for watching! For any questions, suggestions or just to say hi, please use the comment section below!

Codepen:
Twitter:
Email: codingjourney123@gmail.com

Subscribe: ❤️

Nguồn: https://taiduc.org

Xem thêm bài viết khác: https://taiduc.org/giai-tri/

14 COMMENTS

  1. 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

  2. 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?

  3. 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.

LEAVE A REPLY

Please enter your comment!
Please enter your name here