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);
});
Related
I'm doing scrolltop when the document is ready, that's work, but I'm giving the same script to a div to make the scroll manual. The problem is, if I use the auto-scroll, the manual scroll doesn't work.
Manual scroll
$("#flecha-inscripciones").click(function() {
$('html, body').animate({
scrollTop: $("#formInscripciones").offset().top
}, 2000);
});
With:
<div id="flecha-inscripciones"><img src="https://residenciarucab.es/img/arrow-down.png" alt="Baja para ver" title="Baja para ver"></div>
Autoscroll:
$( document ).ready(function() {
$('html, body').delay(5000).animate({
scrollTop: $("#formInscripciones").offset().top
}, 1100);
});
You can see example here.
It only works the auto-scroll because the manual scroll has conflict.
Solved with queue: false; after the code.
Put below code at end of your, but before that include jquery.js file
$.noConflict();
jQuery(document).ready(function($){
$("#flecha-inscripciones").click(function() {
$('html, body').animate({
scrollTop: $("#formInscripciones").offset().top
}, 2000);
});
$('html, body').delay(5000).animate({
scrollTop: $("#formInscripciones").offset().top
}, 1100);
});
So below I have some of my JQuery code that should be causing the clicked value to scroll down to another section of the page. I'm not sure what's wrong with my code as it has stopped working, so I'd appreciate any feedback I can get on this.
$(".list-item1").click(function(e) {
e.preventDefault();
$('html, body').animate({
scrollTop: $(".image1").offset().top
}, 700);
});
$("#list-item2").click(function(e) {
e.preventDefault();
$('html, body').animate({
scrollTop: $(".image2").offset().top
}, 700);
});
$("#list-item3").click(function(e) {
e.preventDefault();
$('html, body').animate({
scrollTop: $(".image3").offset().top
}, 700);
});
I have 3 divs and I want after the page loads delay 0.5 then scroll to second div delay 0.5 then scroll to 3rd div. but my problem is I cannot get it to auto scroll to any of the divs
<div id="mydiv">Content</div>
<div id="mydiv2">Content2</div>
<div id="mydiv3">Content3</div>
$(window).on('load', function () {
$('html, body').animate({
scrollTop: $("#myDiv2").offset().top
}, 2000);
$('html, body').animate({
scrollTop: $("#myDiv3").offset().top
}, 3000);
});
Looks like you just have a typo. You had $("#myDiv2") vs $("#mydiv2"). Also use $(document).ready() instead.
$(document).ready(function(){
$('html, body').animate({
scrollTop: $("#mydiv2").offset().top
}, 2000);
$('html, body').animate({
scrollTop: $("#mydiv3").offset().top
}, 3000);
});
jsFiddler
You onload event isn't valid try this universal onload from Jquery :
$(document).ready(function () { ... add you code here ... });
Your problem is in your HTML. Your divs are mydiv with a lower case 'D', but you are referencing #myDiv with an uppercase 'D'.
I have a fixed header which makes a small amount of div behind the header. So I want to scroll to the #services div but with -100px scroll and the following code is what I am currently using. How would I go about subtracting 100px in the following lines of code:
$(".menu-services").click(function() {
$('html, body').animate({
scrollTop: $("#services").offset().top
}, 2000);
});
Use following code:
$(".menu-services").click(function() {
$('html, body').animate({
scrollTop: $("#services").offset().top - 100
}, 2000);
});
And to make it more dynamic, let us say that your header id is fixed-header then you can write:
$(".menu-services").click(function() {
$('html, body').animate({
scrollTop: $("#services").offset().top - $('#fixed-header').outerHeight()
}, 2000);
});
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/