Back to Top button with JS

Question

Have made a button when you click it then it sends you at the top of page,but there's a problem with it. I need button Back to Top to appear when the page is scrolled like 100px and if it goes below 100px to dissapear, have tried from my examples but didn't worked.

function animateToTop(e) { e.preventDefault(); let scrollToTop = window.setInterval(function() { let pos = window.pageYOffset; if (pos > 0 && pageYOffset >= 10) { window.scrollTo(0, pos - 20); document.querySelector('.scrolimg').style.visibility = 'visible'; } else { window.clearInterval(scrollToTop); document.querySelector('.scrolimg').style.visibility = 'visible'; } }, 9); }

.scrolimg { width: 88px; height: 79px; } .scroll { width: 100px; height: 80px; position: sticky; top: 640px; left: 1350px; transition: 0.2s; z-index: 99; } .scroll:hover { transform: scale(1.2) } body { height: 1400px; background: yellowgreen; margin: 0; padding: 0; } .bg1 { height: 650px; background: red; }

<div class="bg1"></div> <div class="scroll"> <img onclick="animateToTop(event)" class="scrolimg" src="https://www.freeiconspng.com/uploads/arrow-icon-clip-art-file-down-arrow-icon-png-balin-icon-arrow-right--32.png"> </div>

Some comments: 1) pageYOffset is undefined, so it will never be >= 10 (since it gets converted to NaN) 2) I don't understand your JS, it doesn't do anything until you click the button, and then it sets up a timer to fire every 9 ms? So you have to scroll down to the button before anything happens. 3) You're setting the visibility property to visible, but this is the default and you haven't set it to hidden to start with — Robin Zigmond
– Robin Zigmond, Commented Feb 7, 2019 at 20:48
@RobinZigmond - 1) pageYOffset is undefined, can you tell me how to define because it doesn't show any error on Console.Log . 2) Yeah my JS it's a bit messy because I would like to have some pixels scrolled so maybe the button will show or hide. 3) I found this with visibilty in another thread and did my best to make it work but it didn't, can you try and help me with correct entire code mate? — Behar
– Behar, Commented Feb 7, 2019 at 20:54
so add a scroll event listener, if page is scrolled than make a fixed button visible. — epascarello
– epascarello, Commented Feb 7, 2019 at 20:55
@Behar - "can you tell me how to define" - I don't see that you need it at all, just check the value of pos (which you've set to window.pageYOffset). (Actually, I just realised that pageYOffset by default will find the global of that name, so my first comment wasn't actually accurate. But this code is still redundant, at best.) — Robin Zigmond
– Robin Zigmond, Commented Feb 7, 2019 at 20:57

Maheer Ali · Accepted Answer · 2019-02-07 21:04:55Z

Added an event listener for scroll which will check if the the current topScroll and change style.display of .scroll accordingly. I also changed a bit in css postion:fixed bottom:0px right:0px

document.addEventListener('scroll',(e)=>{ let scrollTop = window.pageYOffset || document.documentElement.scrollTop; if(scrollTop > 100) document.querySelector('.scroll').style.display = "block"; else document.querySelector('.scroll').style.display = "none" }) function animateToTop(e) { e.preventDefault(); let scrollToTop = window.setInterval(function() { let pos = window.pageYOffset; if ( pos > 0 && pageYOffset >= 10) { window.scrollTo(0, pos - 20); document.querySelector('.scrolimg').style.visibility = 'visible'; } else { window.clearInterval(scrollToTop); document.querySelector('.scrolimg').style.visibility = 'visible'; } }, 9 ) }

.scrolimg{ width: 88px; height: 79px; } .scroll{ width: 100px; height: 80px; transition: 0.2s; z-index: 99; position:fixed; bottom:0px; right:0px; } .scroll:hover{ transform: scale(1.2) } body{ height: 1200px; background: yellowgreen; margin: 0; padding: 0; } .bg1{ height: 450px; background: red; }

<div class="bg1"></div> <div class="scroll"> <img onclick="animateToTop(event)" class="scrolimg" src="https://www.freeiconspng.com/uploads/arrow-icon-clip-art-file-down-arrow-icon-png-balin-icon-arrow-right--32.png"> </div>

Yeah finally solved thank you;) But can you explain why you didn't added "{" after " else " shouldn't be like this " } else { document.querySelector" or you didn't added brackets because "'scroll',(e)=>{ " has bracket open?
@Behar - an if or else block only contains one statement, it's legal to omit the braces. (Opinion differs on whether this is good style or not, personally I don't like it but I'm not going to get too upset by it.)

marcXandre · Accepted Answer · 2019-02-07 21:23:06Z

Change animateToTop to this and add scroll-behavior: smooth;. It should do the work:

function animateToTop(e) { window.scrollTo(0, 0); } window.addEventListener('scroll', (e) => { var scrollTopBtn = document.getElementsByClassName('scrolimg')[0]; if (window.scrollY >= 100) { scrollTopBtn.style.visibility = 'visible'; } else { scrollTopBtn.style.visibility = 'hidden'; } });

html { scroll-behavior: smooth; }

You can also use:

document.body.scrollTop = 0; document.documentElement.scrollTop = 0;

But there's no more animation

Thanks for your help, this code shows the button and hides it, but there's a problem that when you click button it jumps only 1 pixels and doesn't reach the top of the page and get stuck somehow.
Strange, it works for me. I also found W3 How TO - Scroll Back To Top Button if it can help you
yeah that W3 was working and was going to try do that one, but it had instant speed when you clicked the button and had no idea how to lower the speed and had to ask Stackoverflow.

Collectives™ on Stack Overflow

Back to Top button with JS

2 Answers 2

2 Comments

3 Comments

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

2 Comments

3 Comments

Related