Develop Reference

scroll-to-top button on a mobile website

I'm trying to make the Scroll To Top button appear once the user started scrolling down, instead of it always being present, even when being at the top. Quick note, I barely have experience with JS, so I have no idea what I'm doing.
Anyway here is the page I'm having an error on: http://www.m.evans-carpentry.com/gallery/projects/
<script>
$(function() {
var $elem = $('#content');
$('#nav_up').fadeIn('slow');
$('#nav_down').fadeIn('slow');
$(window).bind('scrollstart', function(){
$('#nav_up,#nav_down').stop().animate({'opacity':'0.2'});
});
$(window).bind('scrollstop', function(){
$('#nav_up,#nav_down').stop().animate({'opacity':'1'});
});
$('#nav_down').click(
function (e) {
$('html, body').animate({scrollTop: $elem.height()}, 800);
}
);
$('#nav_up').click(
function (e) {
$('html, body').animate({scrollTop: '0px'}, 800);
}
);
});
</script>
Thanks!

you call jquery earlier announcements of jquery on line 30
<script>$('#nav Li: has (ul)').doubleTapToGo ();</script>
insert this line after the call jquery

Your code is too complex, try this:
$(document).ready(function(){
//Check to see if the window is top if not then display button
$(window).scroll(function(){
if ($(this).scrollTop() > 100) {
$('.scrollToTop').fadeIn();
} else {
$('.scrollToTop').fadeOut();
}
});
//Click event to scroll to top
$('.scrollToTop').click(function(){
$('html, body').animate({scrollTop : 0},800);
return false;
});
});
".scrollToTop" is the thing to be clicked that scrolls back to the top of the page.

Back to top button not triggering properly

I have a back to top button that appears when you scroll a little bit .It's working fine but when scrolling if I get to the footer i want the button to go above the footer.
I used the jquery animate method to change the bottom css rule of the button when I get to the bottom of the page.But that effect doesn't happen instantly on my website because i have more javascript and i think it needs to go through all the code before it runs the effect and It's just not working properly.
Where is the problem ? .Here is what I have done : JSFIDDLE
var offset = 250;
var duration = 500;
$(window).scroll(function () {
if ($(this).scrollTop() > offset) {
$('.back-to-top').fadeIn(duration);
} else {
$('.back-to-top').fadeOut(duration);
}
});
$('.back-to-top').on('click', function () {
event.preventDefault();
$('html,body').animate({ scrollTop: 0 }, duration);
return false;
});
$(window).scroll(function () {
if ($(window).scrollTop() + $(window).height() == $(document).height()) {
$('.back-to-top').animate({ 'bottom': '400px' });
} else $('.back-to-top').animate({ 'bottom': '10%' });
});

It seems like adding a class that changes the position of the div, and toggling it when the condition is true solved the problem .

How do I use multiple functions in jQuery?

I've added jQuery function that shows and hides navbar when scrolled. I also want to hide a div when the button 'start' is clicked. After i add new function none of them works longer. I have tried to add it to various places, but I still get no result at all. So how do I add multiple functions and make them to work?
Heres my code:
<script>
// function that hides text on click
(function($) {
$('#start').click(function() {
$('.lead').hide());
});
});
// my original function that stopped working after i added new one
(function($) {
$(document).ready(function() {
$(".masthead").css("background-color", "inherit");
// fade in .navbar
$(function() {
$(window).scroll(function() {
// set distance user needs to scroll before we fadeIn navbar
if($(this).scrollTop() > 600) {
$('.masthead').fadeIn();
$(".masthead").css("background-color", "black");
} else if($(this).scrollTop() === 0) {
$('.masthead').fadeIn();
$(".masthead").css("background-color", "inherit");
} else {
$('.masthead').fadeOut();
}
});
});
});
}(jQuery));
</script>

I think the problem is in the closing tag of the function you're adding.
Try like this:
(function ($){
$('#start').click(function(){
$('.lead').hide();
});
}(jQuery));
// my original function that stopped working after i added new one
(function ($) {
$(document).ready(function(){
$(".masthead").css("background-color","inherit");
// fade in .navbar
$(function () {
$(window).scroll(function () {
// set distance user needs to scroll before we fadeIn navbar
if ($(this).scrollTop() > 600) {
$('.masthead').fadeIn();
$(".masthead").css("background-color","black");
} else if($(this).scrollTop() === 0){
$('.masthead').fadeIn();
$(".masthead").css("background-color","inherit");
} else {
$('.masthead').fadeOut();
}
});
});
});
}(jQuery));

At least, closing bracket is wrong here. $('.lead').hide());
Tip: always check developer console first. Have fun coding.

Edit : Note that you have an extra closing bracket in the first function $('.lead').hide());.
You can use the following. Both functions can be combined in to a single block. And you can use $(document).ready() directly. If there is a problem with name conflict for $ use jQuery.noConflict();
<script>
$(document).ready(function() {
$(".masthead").css("background-color", "inherit");
// fade in .navbar
$('#start').click(function() {
$('.lead').hide();
});
$(window).scroll(function() {
// set distance user needs to scroll before we fadeIn navbar
if ($(this).scrollTop() > 600) {
$('.masthead').fadeIn();
$(".masthead").css("background-color", "black");
} else if ($(this).scrollTop() === 0) {
$('.masthead').fadeIn();
$(".masthead").css("background-color", "inherit");
} else {
$('.masthead').fadeOut();
}
});
});
</script>

click the ''Back to Top" button (scrollTop) multiple times issue

I have noticed that if i click the ''Back to Top" button multiple times and then you try to scroll down it causes the window to keep scrolling back to the top. Any idea how to stop this happening anyone?
my code is:
Scroll
<script type="text/javascript">
$(document).ready(function(){
$(window).scroll(function(){
$("html, body").stop();
if ($(this).scrollTop() > 100) {
$('.scrollup').fadeIn();
} else {
$('.scrollup').fadeOut();
}
});
$.clicked = false;
if ($.clicked == false){
$('.scrollup').click(function(){
$.clicked = true;
$("html, body").stop().animate({ scrollTop: 0 }, 600);
return false;
});
}
});
</script>

As you said you click multiple time so event will be fired mulitple times so you need to stop animation function,
So edit your code as below,
$("html, body").stop().animate(
--------------^^^^^^^^----
OR edit code for scroll
$(window).scroll(function(){
$("html, body").stop();

$(function() {
$('button').hide();
$(window).scroll(function() {
if ($(this).scrollTop() >= 50) { // If page is scrolled more than 50px
$('#return-to-top').fadeIn(200); // Fade in the arrow
} else {
$('#return-to-top').fadeOut(200); // Else fade out the arrow
}
});
$('#return-to-top').click(function() { // When arrow is clicked
$('body,html').animate({
scrollTop: 0 // Scroll to top of body
}, 500);
});
});
This should work.

I had a similiar issue.
I just solved it with a simple check:
$('.scrollup').click(function(){
if ($(document).scrollTop() != 0) {
$("html, body").animate({ scrollTop: 0 }, 600);
}
return false;
});
The problem, as already mentioned, is the click event firing multiple times. Because handling the event itself didn't work for me, I just tried to check if the current scroll value/position is already where I want it to be, et voilà: The weird behaviour vanished! :)

button to scroll all the way to the top with click of button

i have this javascript so that when a user is scrolling on the page there will be a small icon to the side that will scroll all the way back up the page rather than manually scrolling. The button shows fine but when i click on it it is not going all the way to the top.
html
Scroll
Script
$(document).ready(function () {
$('#main').scroll(function () {
if ($(this).scrollTop() > 100) {
$('.scrollup').fadeIn();
} else {
$('.scrollup').fadeOut();
}
});
$('.scrollup').click(function () {
$("html, body, main_container, main").animate({ scrollTop: 0 }, 600);
return false;
});
});

problem is in the selectors, you are missing either # id selector or . class selector, to me it seems id:
change this:
$("html, body, main_container, main")
to this and see if it helps:
$("html, body, #main_container, #main")
//-------------^----------------^--------these selector notations