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.

Execute scrollTop animation on $(window).scroll with jquery

I am trying to move the slide once every time that I make scroll in the page. But scroll event doesn't stop and repeat the event. How can I make an animation to move to the next slide color with scrollTop inside $(window).scroll just once for every time? See my Fiddle
And this is the piece of code which doesn't work :(
$('html, body').animate({
scrollTop: ($(next).offset().top)
},500);
My target is something like that http://www.sincedilla.com/

this is probably what you need.
The scroll event ve to be prevented until the animation is finished ,
docs for animation http://api.jquery.com/animate/ read the callback section
$(this).bind('mousewheel', function (e) {
if (!animating) {
animating = true;
if (e.originalEvent.wheelDelta < 0) {
next = $(first).next();
first = $(next);
// scroll down
$("html, body").animate({
scrollTop: ($(next).offset().top)
}, 900, function(){
animating = false;
});
} else {
first = $(next).prev();
next = $(first);
// scroll up
$("html, body").animate({
scrollTop: ($(first).offset().top)
}, 900,function(){
animating = false;
});
}
}
return false;
});
working fiddle http://jsfiddle.net/fdbh0no8/

jQuery scroll does not scroll up

I have this code below and the DEMO fiddle.
jQuery(document).ready(function () {
$(window).scroll(function () {
$('html, body').animate({
scrollTop: $('#content').offset().top
}, 1000);
});
});
I'm really confused why I can't scroll up? Anybody can explain to me why and please share some solutions you have.
Any help, is very appreciated.

Alright, this should do what you are asking for. I don't think it is very user friendly, but that is up to you.
Demo Fiddle
//this prevents the animate method from running multiple times.
var scrolling = false;
jQuery(document).ready(function () {
$(window).scroll(function () {
if ( $(window).scrollTop() <= 100 && scrolling === false) {
//set to true to prevent multiple scrolls
scrolling = true;
//run the animation
$('html, body').animate({
scrollTop: $('#content').offset().top
}, 1000, function() {
//when animation is complete, set scrolling to false
scrolling = false;
});
}
});
});

You can't scroll up because your code is wrapped in the scroll() function so it basically locks its position every time you try and scroll with either the mouses scroll wheel or arrow keys. If you amend to the following then it will position itself accordingly when the page first loads.
jQuery(document).ready(function () {
$('html, body').animate({
scrollTop: $('#content').offset().top
}, 1000);
});

Are you trying to have it animate when the link is clicked? If so you need to change your code:
jQuery(document).ready(function () {
$('a').click(function () {
$('html, body').animate({
scrollTop: $('#content').offset().top
}, 1000);
});
});
I would probably add a class or ID value to your link so you can target that one specific link. The code above would apply to all links on your page...although right now there is only the one.
<h1>Scroll to the Content</h1>
jQuery(document).ready(function () {
$('.scrollToContent').click(function () {
$('html, body').animate({
scrollTop: $('#content').offset().top
}, 1000);
});
});

I'm not sure if you will satisfied on this but i found something that can help a little on my problem.
jQuery(document).ready(function () {
$(this).bind('mousewheel', function(e){
if(e.originalEvent.wheelDelta /120 < 1) {
$('html, body').delay(200).animate({
scrollTop: $('#content').offset().top
}, 1000);
}
});
});
DEMO

No need to add the jquery functionality to achieve the requirement that has been asked. Please remove the Jquery code and run the code snippet provided in the fiddle. It is behaving as per the requirement.

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

why does IE need for me to click twice

I have this jQuery
$('.billing_info').click(function(e){
e.preventDefault();
if(($('.shipping_selection').length) > 0){
if ($('.shipping_selection:checked').length == 0){
$('.hide_error').show();
$("html, body").animate({ scrollTop: $(".hide_error").offset().top }, "slow");
$(".hide_error").effect("highlight", {}, 4000);
return false;
}else{
$('.billing_info').unbind("click");
$('.billing_info').click();
}
}else{
$('.billing_info').unbind("click");
$('.billing_info').click();
}
});
which works awesome in all browsers except in IE. I'm using IE8 and the user needs to click the button twice for the button to accept the click event even if there is one radio button $('.shipping_selection') clicked

Perhaps a bit of refactoring would help. Only prevent default when you need to, otherwise let the function pass through to the default submit event.
$('.billing_info').click(function(e){
if(($('.shipping_selection').length) > 0 && $('.shipping_selection:checked').length == 0){
e.preventDefault();
$('.hide_error').show();
$("html, body").animate({ scrollTop: $(".hide_error").offset().top }, "slow");
$(".hide_error").effect("highlight", {}, 4000);
return false;
}
});