I have a website with 100% height that has a hidden footer, that needs to slide up and show it when a button is clicked, and when that button is clicked again, it should slide down and hide it.
The problem is that the sliding animation is only working when the footer slides up, and when it should slide down, it bumps without animation.
You can see the problem right here, by clicking on the "More" button in the footer.
The JS code used to manipulate that button is the following:
$(document).ready(function(){
$(".footer_container").hide();
$(".show_hide").show();
$('.show_hide').click(function(){
var speed = "500";
$(".footer_container").slideToggle(speed);
$('html, body').animate({
scrollTop: $(document).height()
}, speed);
});
});
Thanks in advance!
Update: I just tried this code:
$('.show_hide').click(function(){
var speed = "500";
$(".footer_container").toggle(speed);
$('html, body').animate({
scrollTop: $(".footer_container").offset().top + $('window').height()
}, speed);
});
And aparently there's an animation going on the footer that I didn't know exist. Maybe that's the cause of this problem?
alright so i gave this a shot:
$('.show_hide').unbind()
$('.show_hide').click(function () {
var speed = "500";
$(".footer_container").toggle(speed);
if ($(".footer_container").data('can-see')) {
var displaced = $('.footer_container').height();
$('.twitter_footer').animate({
marginTop: "600px",
}, {
duration: speed,
complete: function () {
$('.twitter_footer').css('margin-top', "0");
}
});
}
$('html, body').animate({
scrollTop: $(".footer_container").offset().top + $('window').height()
}, speed);
$(".footer_container").data('can-see', !$(".footer_container").data('can-see'))
});
demonstration at http://jsfiddle.net/DPq5Z/
same result, another way (using absolute positioning in order to keep elements above undisturbed):
$('.show_hide').unbind()
$('.show_hide').click(function () {
var speed = "500";
$(".footer_container").fadeToggle(speed);
if ($(".footer_container").data('can-see')) {
slide_down('.twitter_footer', speed);
slide_down('.button_bg', speed);
}
$('html, body').animate({
scrollTop: $(".footer_container").offset().top + $('window').height()
}, speed);
$(".footer_container").data('can-see', !$(".footer_container").data('can-see'))
});
function slide_down(c, speed){
var tp = $(c).offset().top;
$(c).css({
'position': 'absolute',
'top': tp + "px"
});
$(c).animate({
top: tp + 170 + "px",
}, {
duration: speed,
complete: function () {
$(c).css({
'position': "relative",
'top': '0'
});
}
});
}
demonstration at http://jsfiddle.net/9R6L4/
It works as how default animations in jQuery work. If you want to customize this. You need to use jQuery easing plugin. It takes as parameter the easing effect, like easeIn, easeOut, Bounce etc.. that controls the flow. By default it is linear and that is what you see.
Easing Plugin: https://github.com/gdsmith/jquery.easing
$('.show_hide').click(function(){
var speed = "500";
$(".footer_container").fadeToggle(speed);
$('html, body').animate({
scrollTop: $(".footer_container").offset().top + $('window').height()
}, speed);
});
jsFiddle: http://jsfiddle.net/vvmYH/4/
Related
I am using the to top arrow in website to move to the top section with smooth scroll.. Now its moving to top but not moving in smooth..
The js that i used to get smooth scroll was
$(function() {
$('a.page-scroll').bind('click', function(event) {
console.log("scroll");
var $anchor = $(this);
$('html, body').stop().animate({
scrollTop: $($anchor.attr('href')).offset().top
}, 1500, 'easeInOutExpo');
event.preventDefault();
});
});
BUt its not working..
The jsfiddle was https://jsfiddle.net/36m5kp00/
The jquery's that i have used was,
<script src="scripts/controllers/jquery-ui.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
Use this
$(function() {
$('a.page-scroll').bind('click', function(event) {
$("html, body").animate({ scrollTop: 0 }, 1500);
event.preventDefault();
});
});
Actually you need to add the jquery easing plugin if you want to use custom easing methods like easeInOutExpo.
Note: jQuery comes with 2 easing methods linear & swing. Reference here: https://api.jqueryui.com/easings/
Here you can get it from: https://cdnjs.com/libraries/jquery-easing
It works well, Check it here: https://jsfiddle.net/ashishanexpert/36m5kp00/4/
Your working code should be like:
$(window).scroll(function() {
if ($(this).scrollTop()) {
$('#letTop:hidden').stop(true, true).fadeIn();
} else {
$('#letTop').stop(true, true).fadeOut();
}
});
$(function() {
$('a.page-scroll').bind('click', function(event) {
console.log("scroll");
var $anchor = $(this);
$('html, body').stop().animate({
scrollTop: $($anchor.attr('href')).offset().top
}, 1500, 'easeInOutExpo');
event.preventDefault();
});
});
I am creating a form where i have many child forms to submit,so i have used a jQuery functionality where each submit a msg will show at the top of the page ,now what i want,on each submit the page will scroll up to the div where that jQuery is calling .Here is my code
var url = "<%=addPersonalDetailsURL%>";
var type = "addPersonalDetails";
if(!($('#<portlet:namespace/>address1').val()=='' || $('#country').val()=='None' ||$('#<portlet:namespace/>primaryPhone').val()=='')){
jQuery.getJSON(url+"&address1="+address1+"&address2="+address2+"&country="+country+"&state="+state+"&city="+city+"&zip="+zip+"&skypeId="+skypeId+"&twitter="+twitter+"&primaryPhone="+primaryPhone+"&secondaryPhone="+secondaryPhone+"&type="+type, function(data) {
$('html, body').animate({
scrollTop: $(".success").offset().top
}, 800);
for(var z=0; z<data.applicationArray.length;z++){
applicationArray = data.applicationArray[z].split("$$##$$##");
address1 = applicationArray[0];
address2 = applicationArray[1];
city = applicationArray[2];
primaryPhone = applicationArray[3];
}
jQuery.getJSON is giving some result where on the basis i have to use that functionality.So can you tell how i should modify your solution
You should need to get your element's top position in the page and move the scroll to that position. Something like the code below:
jQuery(window).scrollTop(jQuery(".success").offset().top);
Note that the code above will move to the first .success position. If you have to reference a specific one, add the index in the selector, for example:
jQuery(window).scrollTop(jQuery(".success:eq(1)").offset().top);
You can do that with this function:
$("button").click(function () {
$('html, body').animate({
scrollTop: $(".whichElement").offset().top
}, 800);
});
Explanation:
If the button is clicked, we scroll the page to the element with class
whichElement and the duration of the scroll is 800ms.
Example:
$(".first-hey").click(function () {
$('html, body').animate({
scrollTop: $(".second-hey").offset().top
}, 800);
});
$(".second-hey").click(function () {
$('html, body').animate({
scrollTop: $(".third-hey").offset().top
}, 800);
});
$(".third-hey").click(function () {
$('html, body').animate({
scrollTop: $(".first-hey").offset().top
}, 800);
});
.divide {
height: 1300px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<button class="first-hey">First hey</button>
<div class="divide"></div>
<button class="second-hey">Second hey</button>
<div class="divide"></div>
<button class="third-hey">Third hey</button>
I'm trying to make my site animate from bottom to top on page load.
Like on this site: http://partnersandspade.com/studio/
The issue is that my site starts scrolling from halfway down on my site, not from the bottom.
What I have now is this:
jQuery(window).load(function(){
$('html,body').animate({ scrollTop: $(document).height() }, 0);
$('html,body').animate({ scrollTop: 0 }, 4000);
});
Any suggestions?
You're asking jQuery to animate every time the user scrolls. And since this fires the scroll event:
$('html, body').animate({ scrollTop: x });
You will scroll your page up and down endlessly.
Use imagesLoaded: https://github.com/desandro/imagesloaded
// are those images loaded yet?
$('body').imagesLoaded(function() {
var dh = $(document).height();
// set the html, body to bottom while you're at opacity 0
$('html, body').animate({ scrollTop: dh }, 0);
// transition to opacity 1
$('body').addClass('loaded');
// animate to the top
$('html, body').animate({ scrollTop: 0}, 2000);
});
Adding a Loading State
To add a loading state I'd do something like this.
CSS
body {
opacity: 0;
-webkit-transition: opacity 0.5s;
-moz-transition: opacity: 0.5s;
transition: opacity 0.5s;
}
body.loaded {
opacity: 1;
}
This might help:
$( document ).ready(function(){
$('html, body').animate({ scrollTop: $(document).height() }, 0);
$('html, body').animate({ scrollTop: 0 }, 1000);
});
Here is the working example:
http://jsfiddle.net/xvafa479/
You don't need to watch the scroll event. you can simple remove it and start animation onload.
jQuery(window).load(function(){
$('html,body').animate({ scrollTop: 7000 }, 0);
$('html,body').animate({ scrollTop: 0 }, 2000);
});
it will fire the animation only once.
Editted:
You can set the scroll to the end of the page. Like the other answers :
jQuery(window).load(function(){
$('html,body').animate({ scrollTop: $(document).height() }, 0);
$('html,body').animate({ scrollTop: 0 }, 2000);
});
This should work: http://jsfiddle.net/ck52vb3k/
You just need to remove the scroll function on the animations
Code:
$(window).ready(function(){
$('html,body').animate({ scrollTop: 7000 }, 0);
$('html,body').animate({ scrollTop: 0 }, 2000);
});
I'm trying to get the window to scroll through a sequence of divs. Here is my code, but it is quite targeted, and won't work for more than one div.
$('.down_arrow').click(function(e){
$('html, body')
.animate({scrollTop:$('.two')
.offset()
.top }, 'slow');
});
JSFIDDLE
Is there a way I can then go through each $('.container') on each $('.arrow_down') click?
$('.down_arrow').click(function(e){
$('html, body')
.animate(
{
scrollTop:$(this).closest('.container').next().offset().top
}, 'slow');
});
jsFiddle
$('.down_arrow').click(function(e) {
var next_container = $(this).parents(".container").next(".container");
$('html, body')
.animate({ scrollTop:next_container.offset().top }, 'slow');
});
JSFiddle
You should save the last scrolled container, and scroll to the next one.
Something like this:
var currentContainerIndex = 0;
$('.down_arrow').click(function(e){
var currentContainer = $($('.container')[currentContainerIndex]);
if (!currentContainer.size()) {
currentContainerIndex = 0;
currentContainer = $($('.container')[currentContainerIndex]);
}
$('html, body').animate({scrollTop:currentContainer.offset().top }, 'slow');
currentContainerIndex++;
});
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");
});
});