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 .
Related
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.
I am trying to add a class to the header if the user scrolls past the div #home - and remove the class when you scroll back to the top.
The issue is, when you scroll past the div it adds the class but when you keep scrolling and then scroll back up, the class does not get removed. The event is only firing once...
I created this jsFiddle here - https://jsfiddle.net/breezy/9evksr7y/
It works in my jsFiddle file but not on my actual web page, I've also tried this...
$(window).on( 'scroll', function() {
var header = $('#header'),
target = $("#home").offset().top;
var interval = setInterval(function() {
if ($(window).scrollTop() > 400) {
// alert("made it!");
header.addClass('fixed');
clearInterval(interval);
} else {
header.removeClass('fixed');
}
}, 250);
});
But it still does not work. Any idea what I am doing wrong?
Thanks
Edit: The issue was that one of my other functions in the same document was conflicting w/ this scroll function.
So I made some minor tweaks to the code. Not sure what the issue was but this seemed to work for me on my webpage.
$(window).on('scroll', function() {
var header = $('#header'),
target = $("#home").offset().top;
if ($(window).scrollTop() > target) {
header.addClass('fixed');
} else {
header.removeClass('fixed');
}
});
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
});
I have a fixed menu system that slides out and covers 100% of the screen once it is pressed. When it is active the the main scrollbar you will have the ability to scroll through the menu in the active div. Once you close the menu the scrollbar will not allow me to scroll the whole site anymore, it will only scroll the length of the div the slides out.
How can I fix this issue? I need the scrollbar to control the menu once it is active, then have the ability to scroll the whole site once the menu is not active.
Here is my JS and the full code http://jsfiddle.net/8P9kh/8/
$(function(){
window.status=0;
$('#menu').click(function(){
if(window.status==0){
$('#slidingMenu').stop().animate({left:'0px'},500);
window.status=1;
$('body, html').css('overflow','hidden');
}
else{
$('#slidingMenu').stop().animate({left:'-100%'},500);
window.status=0;
$('body, html').css('overflow-y','scroll');
}
});
})
//Close menu when you click Footer
$('#more').click(function () {
var open = $('header').is('.open');
$('#dropFooter')['slide' + (open ? 'Up' : 'Down')](400);
$('header').animate({
bottom: (open ? '-' : '+') + '=200'
}, 400, function () {
$('header').toggleClass('open');
});
});
$('#menu').click(function () {
if ($('').is('.open')) {
$('')
.removeClass('open')
.animate({
'bottom': "-=200"
}, function () {
var $footer = $('.activetoggle');
if ($footer.length)
$footer
.toggleClass('activetoggle footerButton')
.text('Footer');
});
$('footer').slideUp(400);
}
});
$('.footerButton').click(function () {// Change wording once pressed
var $this = $(this);
$this.toggleClass('footerButton');
if ($this.hasClass('footerButton')) {
$this.text('Footer');
} else {
$this.text('Close');
}
$(this).toggleClass('activetoggle');
});
$(window).resize(function(){ //check when window resize
if($(window).width() < 780){ // check when the window width is less than 780
if ($('header').is('.open')) {
$('header')
.removeClass('open')
.animate({
'bottom': "-=200"
});
$footer = $('.activetoggle');
if ($footer.length) {
$footer.toggleClass('activetoggle footerButton').text('Footer');
}
$('#dropFooter').slideToggle(400);
}
}
});
Right now, you're setting the CSS overflow property to hidden when the menu shows up, but then setting overflow-x property to scroll, leaving the overflow property at hidden. Reset the overflow property back to auto:
$('body, html').css('overflow', 'auto');
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