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 .

fixed navigation bar overlaying content when position is given dynamically

I am trying to create a one page website with multiple sections. my problem is that once I click on a link in the navigation bar it scrolls to the item but covers part of the content.
the navigation is only given static positioning when scrolling past its original position (Hope that makes sense). here is a link to my dev site http://wp.matthewwood.me/
here is my code for adding the fixed positioning using JQuery. i tried offsetting it by -50px to accommodate for the fixed nav size but this has not solved the problem.
$(document).ready(function(){
var offset = $(".navbar").offset().top;
$(window).scroll(function() {
if ($(window).scrollTop() >= offset) {
$('.navbar').addClass('navbar-fixed-top');
}
else {
$('.navbar').removeClass('navbar-fixed-top');
}
});
$('a.page-scroll').bind('click', function(event) {
var $anchor = $(this);
$('html, body').stop().animate({scrollTop: $($anchor.attr('href')).offset().top - 50}, 1500, 'easeInOutExpo');
event.preventDefault();
});
});
Any help would be appreciated

When you change from relative to fixed positioning, the block value of the div changes from it's height to zero. This causes the offset issue you are experiencing. See this fiddle here:
https://jsfiddle.net/7muk9zhh/5/
The main things that have changed:
JS:
$(window).scroll(function() {
if ($(window).scrollTop() >= offset) {
$('.navbar').addClass('navbar-fixed-top');
$("#Main").css("margin-top", $(".navbar").height()); //Compensates for fixed positioning
} else {
$('.navbar').removeClass('navbar-fixed-top');
$("#Main").css("margin-top", "");
}
});
$('a.page-scroll').bind('click', function(event) {
var $anchor = $(this);
var globOffset = $(".navbar").height(); //Acts as an offset for the fixed element
$('body').stop().animate({scrollTop: $($anchor).attr('href').offset().top - globOffset}, 1500);
event.preventDefault();
});
HTML:
There is one more problem. The "#home" anchor is used in body. So when finding the offset top for this, it returns 0 (offset of the body element).
Also I think the custom easing 'easeInOutExpo' requires jQuery UI (if that isn't working you need to include it):
<script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.11.4/jquery-ui.min.js"></script>
Hopefully this answers your question!

Use this code: should work properly and has nice smooth scrolling effect:
$(document).ready(function(){
var offset = $(".navbar").offset().top;
$(window).scroll(function() {
if ($(window).scrollTop() >= offset) {
$('.navbar').addClass('navbar-fixed-top');
}
else {
$('.navbar').removeClass('navbar-fixed-top');
}
});
//here it starts
$('a[href^="#"]').bind('click.smoothscroll',function (e) {
e.preventDefault();
var target = this.hash,
$target = $(target);
$('html, body').stop().animate({
'scrollTop': $target.offset().top-90 //change value to your need
}, 1200, 'swing', function () {
window.location.hash = target;
});
});
//end
});

How to integreate two codes with delay?

i have this code to animate my page with anchors
$('a[href*=#]').click(function(){
$('html, body').animate({
scrollTop: $( $.attr(this, 'href') ).offset().top
}, 500);
return false;
});
And this other code to make a delay when the link is presed
function delay (URL) {
setTimeout( function() { window.location = URL }, 500 );
}
So when i have a link with demo the first code runs perfeclty but when i add the delay like this <a onclick="delay ('#contentexpand-1')">demo</a> the first code doesn't work just jump to the anchor.
Please help me! thanks in advance :)

The problem is that your animation is attached to <a> tags. That does not get triggered when you simply set the window location. The solution is to trigger the animate both ways:
// Smoothly scroll to a tag defined by <a name="anchorName">
function scrollTo (anchorName) {
$('html, body').animate( {
scrollTop: $( "a[name=" + anchorName + "]" ).offset().top
}, 500);
}
// Make all # anchors scroll smoothly to their targets
$(document).ready(function(){
$('a[href*=#]').click(function() {
var anchorName = $(this).attr('href').substr(1); // strip off #
scrollTo(anchorName);
return false;
});
});
// Scroll to an anchor after half a second
function delay (anchorName) {
setTimeout( function() { scrollTo(anchorName); }, 500 );
}
I am not convinced that your code for finding the offset was right so I adjusted it a bit to make it clearer.
The tag you want to scroll to is defined like this:
<a name="demo">demo</a>
Then you can choose either behaviour:
scroll smoothly to demo immediately
<a onclick="delay ('demo')">scroll smoothly to demo after half second delay</a>

Cloning content, appending and prepending

I am trying to built an infinite scroll both upwards and downwards, using the isotope plugin.
But I'm stuck yet again after getting some help here on stackoverflow. Unfortunately the content only gets cloned once, but my intention is to clone and append/prepend it every time as soon as the user reaches the bottom or the top of the page.
I'm new to jQuery and I would really appreciate if you could help me debug it.
http://jsfiddle.net/sqJqr/7/
$(document).ready(function() {
var $newElements = $(".isotope").first().children().clone();
$(window).scroll(function() {
if ( $(window).scrollTop() >= ($('body').height() - $(window).height()) ) {
$(".isotope").append( $newElements ).isotope( 'appended', $newElements );
$isotope = $(".isotope").first().children().clone();
}
else if ( $(window).scrollTop() == 1 ) {
$(".isotope").prepend( $newElements ).isotope('reloadItems').isotope({ sortBy: 'original-order' });
$isotope = $(".isotope").first().children().clone();
}
return false;
});
});

It sounds like you are trying to do an infinite scroll. The isotope plugin is interoperable with the infinite scroll plugin so you shouldn't have a problem. Here is an example using both from this page:
$(function(){
var $container = $('#container');
$container.isotope({
itemSelector : '.element'
});
$container.infinitescroll({
navSelector : '#page_nav', // selector for the paged navigation
nextSelector : '#page_nav a', // selector for the NEXT link (to page 2)
itemSelector : '.element', // selector for all items you'll retrieve
loading: {
finishedMsg: 'No more pages to load.',
img: 'http://i.imgur.com/qkKy8.gif'
}
},
// call Isotope as a callback
function( newElements ) {
$container.isotope( 'appended', $( newElements ) );
}
);
});