0 
$(document).ready(function() { $(window).scroll(function() { if ($(this).scrollTop() > 150) { $('.back-to-top').fadeIn(500); } else { $('.back-to-top').fadeOut(500); } }); $('.back-to-top').click(function(event) { event.preventDefault(); $('html, body').animate({scrollTop: 0}, 500); }) });

Above is javascript code for my back-to-top button and I want it show out only when I scroll the page.

However, I found out that this button will show out in the beginning when I refresh the page and hide again when scroll < 150 and show again when scroll > 150.

What can I do to hide it in the beginning and only show out when scroll > 150?

Improve this question
1
  • this is the hardest question i have ever seen Commented Jul 10, 2015 at 7:05

3 Answers 3

Reset to default
3

use below code. hide button on page load button will display as per your condition 150 >

$(document).ready(function() { $('.back-to-top').hide(); // your code here

or using css

.back-to-top{ display:none; }
Improve this answer
Sign up to request clarification or add additional context in comments.

Comments

0 
<style> .back-to-top{ display:none; } </style>
Improve this answer

1 Comment

Please be aware that code-only answers are discouraged on Stack Overflow. Please explain why a piece of code answers the question. A number of your answers suffer from this problem, so if you can return back to your questions and improve them, that would be appreciated.
0

add this in your css:

.back-to-top {opacity:0;}
Improve this answer

Comments

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.