We Keep Coding

jQuery click event not running on first click. (go to top of page action)

As described in the title, here's the code. It won't work on the first click after refresh of page.
$(document).ready(function () {
//Check to see if the window is top if not then display button
$(window).scroll(function () {
if ($(this).scrollTop() > 100) {
$('#myBtn').fadeIn();
} else {
$('#myBtn').fadeOut();
}
});
});
function topFunction() {
//Click event to scroll to top
$('#myBtn').click(function () {
$('html, body').animate({ scrollTop: 0 }, 200);
return false;
});
}

$(document).ready(function () {
//Check to see if the window is top if not then display button
$(window).scroll(function () {
if ($(this).scrollTop() > 100) {
$('#myBtn').fadeIn();
} else {
$('#myBtn').fadeOut();
}
});
//Click event to scroll to top
$('#myBtn').click(function () {
$('html, body').animate({ scrollTop: 0 }, 200);
return false;
});
});

Checkout this,
You had not triggered your topFunction on ready.
$(document).ready(function () {
topFunction();
//Check to see if the window is top if not then display button
$(window).scroll(function () {
if ($(this).scrollTop() > 100) {
$('#myBtn').fadeIn();
} else {
$('#myBtn').fadeOut();
}
});
});
function topFunction() {
//Click event to scroll to top
$('#myBtn').click(function () {
$('html, body').animate({ scrollTop: 0 }, 200);
return false;
});
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<p>test</p><p>test</p><p>test</p>
<p>test</p><p>test</p><p>test</p>
<p>
<button id="myBtn" onclick="topFunction"> ScrolTop </button>
test</p>
<p>test</p><p>test</p><p>test</p><p>test</p><p>test</p><p>test</p>

Only had to take out click function outside the other function.

Jquery back to top button jumps to top instead of scrolling

I was exercising in creating a simple Back-To-Top button that activates when scrolling the page after a certain amount. This is the jQuery
$(document).ready(function () {
$(window).scroll(function() {
if ($(this).scrollTop() > offset) {
$('.back-to-top-button').fadeIn(200);
} else {
$('.back-to-top-button').fadeOut(200);
}
});
});
/*Scroll Plugin*/
$('.back-to-top-button').click(function(event) {
$('html, body').animate({scrollTop: 0}, 'slow');
event.preventDefault();
});
and this is how I placed it in the HTML
<a href="#" class="back-to-top-button" style="display: inline;">
<i class="fa fa-chevron-circle-up"></i>
</a>
Problem is, it won't scroll up, instead it just jumps on top. I can't find any solution on the web, as it seems it does this only on my site, and everytime I try it on other websites it works.

It now works. I've declared the event handler inside the document ready function
$(document).ready(function () {
var offset = 250;
var duration = 300;
$(window).scroll(function() {
if ($(this).scrollTop() > offset) {
$('.back-to-top-button').fadeIn(duration);
} else {
$('.back-to-top-button').fadeOut(duration);
}
});
/*Scroll Plugin*/
$(".back-to-top-button").click(function(event) {
$('html, body').animate({scrollTop: 0}, 'slow');
event.preventDefault();
});
});

Some issues with a 'scroll to top button'

I have this 'scroll to top button' that pops up after the user has scrolled down 300px. Everything works fine so far. What I'm trying to do now, is to make this button pop up at a specific element.
Here is the jQuery:
// hide #back-top first
$("#back-top").hide();
// fade in #back-top
$(function () {
$(window).scroll(function () {
if ($(this).scrollTop() > 100) {
$('#back-top').fadeIn();
} else {
$('#back-top').fadeOut();
}
});
// scroll body to 0px on click
$('#back-top a').click(function () {
$('body,html').animate({
scrollTop: 0
}, 800);
return false;
});
});
Ok, I then changed this line
if ($(this).scrollTop() > 100) {
to
if ($(this).scrollTop() > '.show-button-here') {
but it didn't work. Any ideas what I'm doing wrong?
Here is a fiddle: http://jsfiddle.net/v70L4buk/

You need to get the position of the element from the top of the page and then subtract how far from the top you want that element to get before showing the up arrow. In this case, I am showing the arrow when a link I created in the page gets to 300px from the top. Or you can remove the number and when that element gets to the top of the viewport the function will kick in.
if ($(this).scrollTop() > $('.show').offset().top - 300) {
JSFIDDLE: https://jsfiddle.net/gvpLe06c/1/

backtotop.js bug: box is always visible in Firefox 29

// JavaScript Document
$(document).ready(function(){
// hide #back-top first
$("#back-top").hide();
// fade in #back-top
$(function () {
$(window).scroll(function () {
if ($(this).scrollTop() > 100) {
$('#back-top').fadeIn();
} else {
$('#back-top').fadeOut();
}
});
// scroll body to 0px on click
$('#back-top a').click(function () {
$('body,html').animate({
scrollTop: 0
}, 800);
return false;
});
});
});
This should hide the box until you have scrolled to about 100px from the top. It does work in every browser until the latest Firefox update came out. Any suggestions why that is?
Check the box on the lower left corner on this site: http://lightningsoul.com

Problem had nothing to do with FF29 but with the implementation of the JavaScript.
I had to add a leading / in order to implement it for pages like http://lightningsoul.com/media/vid/1934 etc.

JQuery stop element from fading back in

I've made this little snippet to scroll the window to the top of the page.
$(window).scroll(function(){
$("#scrollup").fadeIn("slow");
});
$("#scrollup").click(function(){
$('html, body').animate({ scrollTop: 0 }, 'normal', function() {
$("#scrollup").fadeOut("slow");
});
});
However, when the scrollup div fades out after the window scrolls, it fades back in. How do I stop this from happening? Thanks.
I think I have found a reasonable solution
$(window).scroll(function(){
if ($(this).scrollTop() > 100) {
$('.scrollup').fadeIn();
} else {
$('.scrollup').fadeOut();
}
});
Would this be easier than changing my original code?

Check out .stop(): http://api.jquery.com/stop/
$(window).scroll(function(){
if ($(this).scrollTop() > 100) {
$('.scrollup').stop().fadeIn();
} else {
$('.scrollup').stop().fadeOut();
}
});

You should make sure that the scrollup div isn't faded in when you are at the top or when it is already faded in ( visible )
$(window).scroll(function(){
if ( $(window).scrollTop() !== 0 or $("#scrollup").is(":hidden") ) then {
$("#scrollup").fadeIn("slow");
}
});

You could just add an if statement to check if it is at the top:
$(window).scroll(function(){
if($("body").scrollTop()!=0)
$("#scrollup").fadeIn("slow");
});
$("#scrollup").click(function(){
$('html, body').animate({ scrollTop: 0 }, 'normal', function() {
$("#scrollup").fadeOut("slow");
});
});​